Angular 4 - 在 ngFor 指令上显示/隐藏元素答案

【问题标题】：Angular 4 - show/Hide elements on ngFor directiveAngular 4 - 在 ngFor 指令上显示/隐藏元素
【发布时间】：2017-09-01 16:37:46
【问题描述】：

我有一个列表列表，我想根据属性值隐藏/显示内部列表

<md-list *ngFor="let el of data">
    <md-list-item *ngFor="let item of el.items" >
      <h4 mdSubhead]er>{{item.name}}</h4>
    </md-list-item>h4
  </md-list>

我尝试过使用*ngIf，但 Angular4 只允许一个元素的一个模板绑定。

如何实现这种行为？

【问题讨论】：

显示/隐藏条件是什么？您可以使用ng-container 或尝试使用[hidden] 属性。
*ngIf and *ngFor on same element causing error的可能重复

标签： angular list show

【解决方案1】：

你可以通过添加一个额外的 div 或 ng-container 来做到这一点，这对于角度来说是最好的

<md-list *ngFor="let el of data">
  <ng-container *ngIf="el.something">
    <md-list-item *ngFor="let item of el.items" >
      <h4 mdSubheader>{{item.name}}</h4>
    </md-list-item>
  </ng-container>
 </md-list>

【讨论】：

【解决方案2】：

使用ng-container（不需要额外的元素）并在同一条件下使用*ngIf to hide/show DOM。

<md-list *ngFor="let el of data">
  <ng-container *ngIf="el.show">
    <md-list-item *ngFor="let item of el.items" >
      <h4 mdSubhead]er>{{item.name}}</h4>
    </md-list-item>
  </ng-container>
</md-list>

【讨论】：

自 ng-container 以来最聪明的解决方案不会被添加到 DOM。这是正确的做法。
ng-container > ng-template > DOM 元素用于这种情况

【解决方案3】：

我认为最好的方法可能是先获取数据，然后删除不需要的项目并遍历剩余的列表。但是如果真的需要在模板中，那么你可以使用 ng-template 和 long *ngFor 版本，比如：

<ng-template ngFor let-el [ngForOf]="data" let-i="index">
 <md-list #el>
 <ng-template ngFor let-item [ngForOf]="el.items" let-i="index">
  <md-list-item #item>
    </md-list-item>h4
  </ng-template>
 </md-list>
</ng-template>

【讨论】：

只是为了添加到 John Snow 你可以添加一个过滤器来过滤掉你不想要的东西。

【解决方案4】：

使用这里提到的<ng-container>：<ng-container> to the rescue

<md-list *ngFor="let el of data">
    <ng-container *ngIf="your-condition-here">
        <md-list-item *ngFor="let item of el.items" >
            <h4 mdSubhead]er>{{item.name}}</h4>
        </md-list-item>
    </ng-container>
</md-list>

【讨论】：