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

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

ionic3 ionic-framework angular

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

2 回复 | 直到 8 年前

ashfaq.p 8 年前

您可以为此使用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>

fastr.de 8 年前

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

推荐文章

Moblize IT · 未设置ion-select默认值

1 年前

Gappy · 为什么Angular要求一个独立的组件,即使它是

1 年前

ProgrammingStudent · 使用javascript更新ionic web应用程序中.pane和.view的背景色

2 年前

user_1357 · Firebase是否将现有用户链接到匿名帐户?

2 年前

m_m · Axios onUploadProgress事件在Capacitor Android上未触发的问题

2 年前

Yeo Bryan · Ionic项目申请通知权限

3 年前

Joe Johnson · Ionic 7模态在第二次点击时不起作用

3 年前

Piyush aggarwal · 通过Cordova文件打开程序2避免REQUEST_INSTALL_PERMISSION

3 年前

Roberto Vieira · 我的离子搜索栏过滤器不工作

3 年前

marlonga · 错误:在Ionic Angular应用程序中使用argon2浏览器时找不到模块

3 年前