angular 4 재질 찾기 tab index from tab header

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>