代码之家  ›  专栏  ›  技术社区  ›  james watt

带有离子列表标题或离子项目分隔符的离子列表

  •  1
  • james watt  · 技术社区  · 7 年前

    我有一个项目列表,其中包含具有特定属性的项目子组。我想以这样的方式列出它们,即对于每个子组,我都有一个具有该属性的项目列表,等等,但我希望它是动态的,如果我有一个新的子组,列表将自动更新。我想用离子列表标题或离子列表分隔符来划分子组。我试过这样的方法:

    <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 在同一条语句中,我不想有超过一个列表,我想将所有数据存储在一个对象列表中。我希望你明白我想做什么。也许用一些管子?有人有什么想法吗?谢谢

    2 回复  |  直到 7 年前
        1
  •  2
  •   ashfaq.p    7 年前

    您可以为此使用ng容器。将if条件置于ng容器上。

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

    Ng-container

    <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>
    
        2
  •  1
  •   fastr.de    7 年前

    为什么不使用 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 有关详细信息。