角度4材質タブのインデックスからのタブのインデックス

Question

私は標準的なマットタブを持っていますが、それは配列のリストに基づいて動的にレンダリングされるという違いがあります。以下のようなもの：私は、タブがそのように選択されていない場合でも、どのように私はタブのインデックスを見つけるのですか閉じるアイコンを打つ可能性があるとして

<mat-tab-group> 
        <mat-tab *ngFor="let tb of dynTabs"> 
         <ng-template mat-tab-label> 
           {{tb.label}}&nbsp;&nbsp;<mat-icon (click)="removeTab($event)">close</mat-icon> 
         </ng-template> 
         <!-- tab content area --> 
         <div>  
           my blaw blaw contents 
         </div> 
        </mat-tab> 
      </mat-tab-group> 

.TSは

 this.dynTabs.push(
      {"label": "Opportunities"}, 
    {"label": "Opportunities1"}, 
    {"label": "Opportunities2"} 
     ); 

removeTab(ev){ 
    console.log(ev) 
    } 

私の質問に次いであります閉じるアイコンがクリックされていますか？

Answer 1

あなたは次のように(click)ハンドラにtbを渡すことができます。

<mat-tab *ngFor="let tb of dynTabs"> 
    <ng-template mat-tab-label> 
     {{tb.label}}&nbsp;&nbsp;<mat-icon (click)="removeTab(tb)">close</mat-icon> 
    </ng-template> 
    <!-- tab content area --> 
    <div>  
     my blaw blaw contents 
    </div> 
</mat-tab> 

をあなたはまた、次のようにインデックスを渡すことができます。

<mat-tab *ngFor="let tb of dynTabs; let i=index"> 
    <ng-template mat-tab-label> 
     {{tb.label}}&nbsp;&nbsp;<mat-icon (click)="removeTab(i)">close</mat-icon> 
    </ng-template> 
    <!-- tab content area --> 
    <div>  
     my blaw blaw contents 
    </div> 
</mat-tab> 

あなたはまだ両方のケースで$eventを渡すことができます

<mat-tab *ngFor="let tb of dynTabs"> 
    <ng-template mat-tab-label> 
     {{tb.label}}&nbsp;&nbsp;<mat-icon (click)="removeTab(tb, $event)">close</mat-icon> 
    </ng-template> 
    <!-- tab content area --> 
    <div>  
     my blaw blaw contents 
    </div> 
</mat-tab>