角材料垫标签标签答案

【问题标题】：Angular material mat-tab-label角材料垫标签标签
【发布时间】：2018-12-07 02:04:00
【问题描述】：

我想从 selectedTabChange 事件中访问序列的名称

<mat-tab-group (selectedTabChange)="onSequenceChangeEvent($event, sequence)">

<mat-tab  *ngFor="let sequence of sequencesForSelectedScope">

    <ng-template mat-tab-label>
        <span>{{sequence.sequenceName}}</span>
    </ng-template>

</mat-tab>

在这种情况下，我可以访问以下内容：sequenceEvent.tab.templateLabel.context 但是这个上下文是未定义的。我如何将其设置为例如sequence.sequenceName?

【问题讨论】：

您可以使用selectedIndexChange 事件并获取索引号，然后您可以访问this.sequencesForSelectedScope[index].sequenceName 之类的内容。让我知道这是否有帮助。
是的，它正在解决我的问题，但是有什么方法可以为 ng-template mat-tab-label 的上下文提供数据。应该有这样的东西
抱歉没有收到你
有没有办法将数据绑定到这个上下文*
表示您要在当前标签中添加标签或您要更改现有数据的标签名称。

标签： angular angular-material

【解决方案1】：

有一种方法可以做到这一点，但它有点像 hack。如果您将“序列”数据分配给选项卡的“标签”输入，则可以从 MatTabChangeEvent 中获取它。这仅适用于您使用模板标签，因此您可以“重新利用”标签输入：

<mat-tab-group (selectedTabChange)="onSequenceChangeEvent($event)">

<mat-tab *ngFor="let sequence of sequencesForSelectedScope" [label]="sequence">

    <ng-template mat-tab-label>
        <span>{{sequence.sequenceName}}</span>
    </ng-template>

</mat-tab>

onSequenceChangeEvent(event: MatTabChangeEvent) {
  console.log(event.tab.textLabel.sequenceName);
}

【讨论】：

工作，可能有用。谢谢。
这很棒，它解决了我获取每个选定标签的唯一 ID 的问题，因为我现在可以将整个对象传递给标签。