Ionic 2 * ngFor循环索引3

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

<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)">

请建议。

来源

2017-03-27 Sanny Srivastava

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

来源

2017-03-27 13:48:12

最佳的解决方案通过了指数，由于控制功能！ –

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

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

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

Sample Demo

来源

2017-03-27 12:21:33

<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这里父容器，我不熟悉并且与离子，所以请进行适当的更改

来源

2017-03-27 12:22:01

Ionic 2 * ngFor循环索引3

回答

相关问题