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

时间:2019-10-14 17:15:41

标签: angular typescript angular-material mat-tab

我想在单击按钮时禁用选定的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]属性,

但是它禁用了所有选项卡,而不是选中的选项卡,并且没有禁用控件。

我该如何实现?

2 个答案:

答案 0 :(得分:1)

this.tabGroup._tabs是Item的列表,您应该将列表转换为数组,或者应该访问Query list内的_results属性

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

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

Example

答案 1 :(得分:0)

您可以使用默认属性curl -v -F field=@pom.xml http://localhost:8080/jax-rs-multipart/api > POST /jax-rs-multipart/api HTTP/1.1 > Content-Type: multipart/form-data; boundary=------------------------d60a2c38aa57dfbe > < HTTP/1.1 404 Not Found

mat-tab isActive

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