离子 2 *ngFor 循环如果索引 3答案

【问题标题】：Ionic 2 *ngFor loop if index 3离子 2 *ngFor 循环如果索引 3
【发布时间】：2017-03-27 21:48:12
【问题描述】：

在我的 sidemenu 模板中，我使用 ngFor 循环来显示所有项目。请看下面：-

 <ion-item menuClose ion-item *ngFor="let page of pages" (click)="openPage(page)">
  <ion-icon [name]="page.icon" item-left></ion-icon>
  {{page.title | translate}}
  </ion-item>

但我想要一个具有不同回调函数的菜单项，如下所示：-

<ion-item menuClose ion-item (click)="openAnotherPage(136379)">
  <ion-icon name="home" item-left></ion-icon>
  New Menu
  </ion-item>

但问题是我想要在第三个位置调用 openAnotherPage 的菜单项。

目前“页面”有 8 行，我无法在循环之间调用我的“新菜单”项。

是否可以检查索引和更新回调函数和菜单名称？

 <ion-item menuClose ion-item *ngFor="let page of pages" **Like if index 3 **(click)="AnotheropenPage(page)" **and for the rest** (click)="openPage(page)">

请提出建议。

【问题讨论】：

标签： angular ionic2

【解决方案1】：

openPage(page)方法可以在app.component.ts文件中配置。

你可以从app.html传递索引

<button menuClose ion-item *ngFor="let p of pages; let i = index" (click)="openPage(p,i)"

那么在app.component.ts中就可以根据传入的索引来控制功能了

openPage(page,index) {
   this.rootPage = index != 3 ? page : AnotherPage;
   // AnotherPage can also be a method like this.anotherPage(136379);
}

【讨论】：

【解决方案2】：

你可以在这里简单地使用三元运算符。

(click)="index === 3 ? AnotheropenPage(page): openPage(page)"

或者您可以将此条件逻辑转换为组件方法本身。

Sample Demo

【讨论】：

【解决方案3】：

<div *ngFor="let page of pages; let i=index">
 <ion-item menuClose ion-item  *ngIf='i ==3' (click)="AnotheropenPage(page)">
 <ion-item menuClose ion-item  *ngIf='i !==3' (click)="openPage(page)">
</div>

你可以试试这个

PS：- 我在这里将div 作为父容器，我不熟悉 ionic，所以请进行适当的更改

【讨论】：