Javascript 在md对话框中选择活动md选项卡md选项卡组

我必须打开一个md对话框，其中包含一个带有两个选项卡的md选项卡组。md对话框可以从两个按钮打开，这两个按钮应该打开相应的选项卡。 打开md对话框的模板：

<button md-button class="" (click)="openDialog(1)">open tab 1</button>
<button md-button class="" (click)="openDialog(2)">open tab 2</button>

和对话框模板：

<md-tab-group  class="follow-dialog">
<md-tab  label="tab 1" id="followers-tab" md-active="data.type == 1">                            
    tab 1 content
</md-tab>
<md-tab  label="tab 2" id="following-tab" md-active="data.type == 2">                            
    tab 2 content
</md-tab>

表1内容
表2内容

---

问题是选项卡1一直处于打开状态。

您需要使用

的

[selectedIndex]

属性。假设

data.type

表示

tabIndex

，则可以执行以下操作：

<md-tab-group class="follow-dialog" [selectedIndex]="data?.type-1">
    <md-tab label="tab 1" id="followers-tab">
        tab 1 content
    </md-tab>
    <md-tab label="tab 2" id="following-tab">
        tab 2 content
    </md-tab>
</md-tab-group>

表1内容
表2内容

删除

md active

表达式，您不需要它。请记住，制表符的索引从0开始，这就是为什么在这个表达式中减去1：

[selectedIndex]=“data？”type-1“

链接到

尝试以下操作：

openDialog(tab: number) {
    let dialogRef = this.dialog.open(TwoTabDialog);
    this.dialogRef.componentInstance.activeTab = tab - 1;
    dialogRef.afterClosed().subscribe(result => {});    
}

<md-tab-group  [selectedIndex]="activeTab">
    <md-tab  label="tab 1" id="followers-tab">                            
        tab 1 content
    </md-tab>
    <md-tab  label="tab 2" id="following-tab">                            
        tab 2 content
    </md-tab>
</md-tab-group>

openDialog（选项卡：编号）{
让dialogRef=this.dialog.open（TwoTabDialog）；
this.dialogRef.componentInstance.activeTab=tab-1；
dialogRef.afterClosed（）.subscribe（结果=>{}）；
}
表1内容
表2内容

openDialog(tab: number) {
    let dialogRef = this.dialog.open(TwoTabDialog);
    this.dialogRef.componentInstance.activeTab = tab - 1;
    dialogRef.afterClosed().subscribe(result => {});    
}

<md-tab-group  [selectedIndex]="activeTab">
    <md-tab  label="tab 1" id="followers-tab">                            
        tab 1 content
    </md-tab>
    <md-tab  label="tab 2" id="following-tab">                            
        tab 2 content
    </md-tab>
</md-tab-group>