禁用按钮上的选定选项卡单击 Mat-Tab

Question

我想在单击按钮时禁用选定的 mat-tab 和里面的元素，

//HTML

 <mat-tab-group #tabGroup>
      <mat-tab *ngFor="let subject of subjects" [label]="subject.name">
        {{ subject.name }}
            <mat-selection-list>
              <mat-list-option *ngFor="let ans of datas">
                 {{ans}}
              </mat-list-option>
            </mat-selection-list>
      </mat-tab>
    </mat-tab-group>

    <button (click)="buttonClick()"></button>

//打字稿

@ViewChild('tabGroup',{static:false}) tabGroup: MatTabGroup;

buttonClick(){
this.tabGroup._tabs[this.tabGroup.selectedIndex].disabled = true;
}

尝试在 ,

中使用 [disabled] 属性

但是它禁用了所有选项卡而不是选择一个选项卡并且没有禁用控件。

我怎样才能做到这一点？

Answer 1

您可以使用 mat-tab isActive

的默认值属性

<mat-tab-group>
  <mat-tab #tab [disabled]='!tab.isActive' *ngFor="let mytab of tabs" [label]="mytab.name">
    {{ mytab.name }}
  </mat-tab>
</mat-tab-group>

参考：https://material.angular.io/components/tabs/api

Answer 2

this.tabGroup._tabs 是项目列表，您应该将列表转换为数组，或者您应该访问查询列表

中的 _results 属性

this.tabGroup._tabs.toArray()[0].disabled = true;

或者

this.tabGroup._tab['_results'][0].disabled = true;

Example

禁用按钮上的选定选项卡单击 Mat-Tab

Disable selected tab on button click Mat-Tab

typescript

angular-material

angular

mat-tab