ngIf 可以在 Angular 1.5 中引用嵌套 ngFor 中的变量。 如何在 Angular 10 中实现相同的功能？

Question

以下代码适用于 Angular 1.5。 <tr> 元素只有在启用了该行键的 'showFields' 标志时才会呈现。

<table>
  <ng-container *ngIf="showFields[row.key]">
    <tr *ngFor="let row of rows">
      <td>{{row.key}}</td>
      <td>{{row.value}}</td>
    </tr>
  </ng-container>
</table>

请注意，来自 ngFor 的“行”变量对封闭的 ngIf 是可见的。 这不再适用于 Angular 2+，因为 ngFor 变量的 scope 现在仅限于元素。 我怎样才能达到同样的效果？

Answer 1

您可以像这样切换ngFor和ngIf ：

<table>
  <ng-container *ngFor="let row of rows">
    <tr *ngIf="showFields[row.key]">
        <td>{{row.key}}</td>
        <td>{{row.value}}</td>
    </tr>
  </ng-container>
</table>

除了使用单独的showFields boolean 数组，您还可以考虑将新属性 showField 添加到行 object，然后您可以简单地检查*ngIf="row.showField" ，这可以防止越界异常。