angular - 如何将自定义类添加到 Angular Material 选项卡？

Question

在 Angular 6 中，我使用 Angular Material 通过选项卡显示一些数据。

<mat-tab-group>
    <mat-tab 
    *ngFor="let bar of foo.bar" 
    [label]="bar.Name"
    [ngClass]="bar.IsActive ? 'bar-on' : 'bar-off'">
      // ...
    </mat-tab>
  </mat-tab-group>

无论 bar 的 IsActive 属性是 true 还是 false，我都想设置不同的选项卡样式。

我已尝试使用 [ngClass]="bar.IsActive ? 'bar-on' : 'bar-off'" 如上所示，但未添加类。

出于恶意，我尝试了更简单的 class = 'bar-on' 但即使那样也没有添加该类。

因此，我想知道，是否可以将自定义类添加到 Angular Material 选项卡？

编辑:IsActive 属性是 foo 对象的属性。它与选项卡的激活状态无关。事件选项卡可以显示带有 IsActive = false 的对象，反之亦然。

Answer 1

是的，使用 ng-template 代替 label 是可能的。

第一个选项卡上的 ngClass 示例。 stackblitz

<mat-tab-group>
  <mat-tab > 
   <ng-template mat-tab-label>
                <span [ngClass]="{'color-red': isError?'red':'black'}">Security</span>
   </ng-template>
    Content 1 
   </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>