Ionic 2 * ngForループの場合インデックス3

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> 

しかし、私は別のコールバック関数を持っています1つのメニュー項目をしたい、下記の： -

<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

してくださいイオンとfamilierないです

メソッドは、app.component.tsファイルで設定できます。

あなたが次にapp.component.tsにあなたが

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

Answer 2

ここでは、単純に3項演算子を使用できます。

(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を取って、私はとても適切な変更