角度 4 材料查找选项卡索引从选项卡标题

Question

我有一个标准的mat-tab，区别在于它们是根据数组列表动态呈现的。 如下所示：

 <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

可以通过以下方式将tb传递到(click)处理程序中：

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