Question

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

<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只允许对一个元素进行一次模板绑定。

我该如何实现这个目标呢？

Answer 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>

Answer 2

使用ng-container（不需要额外的元素），同时有条件地使用*ngIf到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>

Answer 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>

Answer 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>

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

4 个答案: