关于angular：带有离子列表标题或离子项目分隔符的离子列表


Ion-list with Ion-list-header or Ion-item-divider

我有一个包含具有特定属性的项目子组的项目列表。我希望以这样的方式列出它们：对于每个子组，我都有一个具有该属性的项目的列表，依此类推，但是我希望它是动态的，如果我有一个新的子组，则该列表将自动更新。我想用ion-list-header或ion-list-divider划分子组。我尝试过这样的事情：

1
2
3
4
5
6
7
8
<ion-list *ngFor="let header of headers">
  <ion-list-header>
    {{ header }}
  </ion-list-header>
  <ion-item *ngFor="let item of items | async" *ngIf="item.property === header">
    {{ item.name }}
  </ion-item>
</ion-list>

但是我不能在同一条语句中使用*ngFor和*ngIf，并且我不想拥有一个以上的列表，我想将所有数据存储在一个对象列表中。我希望你了解我想做什么。也许有一些烟斗？有人有想法吗？谢谢

您可以为此使用ng-container。将if条件放在ng-container上。

它不会干扰样式或布局。在这里阅读更多信息

Ng容器

1
2
3
4
5
6
7
8
9
10
11
<ion-list *ngFor="let header of headers">
  <ng-container *ngIf="items?.length">
    <ion-list-header>
      {{ header }}
    </ion-list-header>

    <ion-item *ngFor="let item of items | async">
       {{ item.name }}
    </ion-item>
  </ng-container>
</ion-list>
相关讨论

为什么不将virtualscroll与headerFn一起使用？

1
2
3
4
5
6
7
8
9
10
11
<ion-list [virtualScroll]="items" [headerFn]="myHeaderFn">

  <ion-item-divider *virtualHeader="let header">
    Header: {{ header }}
  </ion-item-divider>

  <ion-item *virtualItem="let item">
    Item: {{ item }}
  </ion-item>

</ion-list>

headerFn用myHeaderFn(在ts文件中实现)决定何时绘制标题。在长列表中，virtualscroll会回收这些项目，因此不会被所有项目消耗掉内存。

有关详细信息，请参见ionic-Doc。