Question

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

<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，而且我不想拥有多个列表，我想将所有数据存储在一个对象列表。我希望你明白我想做什么。也许有些管道？有人有一些想法吗？感谢

Answer 1

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

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

Ng-container

pool-1-thread-1 is executing
Hello World AFter 10 sec
pool-2-thread-1 is executing
Hello World AFter 2 sec

Answer 2

为什么不对virtualscroll使用headerFn？

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

具有Ion-list-header或Ion-item-divider的Ion-list

2 个答案: