Angular Material 以编程方式更改选项卡标签

Question

我正在使用 Angular 5.0.0 和 Material 5.0.0-rc.1。我有一个标签组，我希望最后一个标签始终有一个额外的图标按钮作为标签的一部分。

这是标签组的现有代码：

<mat-tab-group #revTabGroup class="tab-group" [(selectedIndex)]="selectedTab">
    <mat-tab *ngFor="let rev of proposal.revisions" label="{{rev.revisionID}}">
        <proposal-revision [proposalRevision]="rev"></proposal-revision>
    </mat-tab>
</mat-tab-group>

我希望 <button mat-icon-button matTooltip="Delete This Item"><mat-icon>delete_forever</mat-icon></button> 仅显示在最后一个选项卡上的修订 ID 旁边。选项卡的数量会发生变化，因此需要调用一个函数或其他东西来更新更改后哪个选项卡具有按钮。

首先，是否可以在标签标签上显示一个按钮，或者你可以只添加文本？​​

其次，有没有办法以编程方式设置标签，可能类似于this.revTabGroup.???.textLabel = "<button> ... </button>"？

我什至认为也许这可以使用 css 来完成，例如：

.mat-tab-labels:last-child {
    ...
}

但是，我什么也做不了。任何人有任何想法或知道这是否可能？

Answer 1

您可以在 ngFor 循环中使用 Angular 的 last 键：

<mat-tab-group #revTabGroup class="tab-group" [(selectedIndex)]="selectedTab">
    <mat-tab *ngFor="let rev of proposal.revisions; let last = last;" [label]="rev.revisionID">
          <ng-template md-tab-label>
            {{rev.revisionID}}
            <button *ngIf="last" mat-icon-button matTooltip="Delete This Item"><mat-icon>delete_forever</mat-icon></button>
          </ng-template>
        <proposal-revision [proposalRevision]="rev"></proposal-revision>

    </mat-tab>
</mat-tab-group>