Angular中*ngFor内嵌套*ngIf时换行失效问题求助

嘿，我来帮你捋捋问题出在哪，再给几个实用的解决办法～

首先看你最初的代码：第一个例子里，你把<br>直接放在ng-container里，每个循环项都会输出{{row.ErrorCode}}和<br>，浏览器解析后自然每个错误码后面都有换行，显示正常。

但第二个例子里，你把<br>塞进了带*ngIf的<span>里面，这就导致只有当row.ErrorCode存在时才会输出<br>——哪怕两个错误码都存在，也可能因为<span>是内联元素，浏览器渲染时的换行效果不如预期，才出现了错误码连在一起的情况。

给你几个靠谱的解决方案：

方法1：把换行移到ngIf结构外面 #

不管有没有错误码，每个循环项后面都统一加上<br>，确保每个条目都能换行：

<ng-container *ngFor="let row of moreInfoData.errorInformationArray; let i = index"  >
  <span *ngIf="row.ErrorCode; else noErrorCode">
    {{row.ErrorCode}}
  </span>
  <ng-template #noErrorCode>N/A</ng-template>
  <br>
</ng-container>

方法2：用块级元素代替内联的span #

<div>是块级元素，每个div会自动独占一行，不需要额外加<br>，还更符合语义化：

<ng-container *ngFor="let row of moreInfoData.errorInformationArray; let i = index"  >
  <div *ngIf="row.ErrorCode; else noErrorCode">
    {{row.ErrorCode}}
  </div>
  <ng-template #noErrorCode><div>N/A</div></ng-template>
</ng-container>

方法3：用更简洁的逻辑或写法 #

如果只是给row.ErrorCode设置默认值，完全可以不用单独的ng-template，一行代码搞定：

<ng-container *ngFor="let row of moreInfoData.errorInformationArray; let i = index"  >
  <div>{{ row.ErrorCode || 'N/A' }}</div>
</ng-container>

这个写法既简洁，又能通过div自动实现换行，一举两得～

备注：内容来源于stack exchange，提问作者Rich