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

Question

在我的侧边菜单模板中，我使用 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 调用的菜单项放在第 3 位。

目前"页面"有 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

可以在

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

您可以从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)"

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

示例演示

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作为父容器，我对离子不熟悉，所以请进行适当的更改