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" ，這可以防止越界異常。