Question

在我的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)">

请建议。

Answer 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);
}

Answer 2

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

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

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

Sample Demo

Answer 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 2 * ngFor循环，如果索引3

3 个答案: