在md-dialog中选择活动的md-tab md-tab-group

时间:2017-08-28 10:45:13

标签: javascript angular angular-material2

我必须打开一个md对话框,其中包含一个带有两个选项卡的md-tab-group。可以从两个打开相应选项卡的按钮打开md对话框。 打开md对话框的模板:

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

component.ts:

    openDialog(type) {

      var data: any = {};
      data.type = type;

      let dialogRef = this.dialog.open(TwoTabDialog, {height: 'auto', width: '529px', data: data});
      dialogRef.afterClosed().subscribe(result => {});    
   }

对话框模板:

<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 个答案:

答案 0 :(得分:4)

您需要使用[selectedIndex]的{​​{1}}属性。假设<md-tab-group>代表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> 表达式,您不需要它。请记住,制表符的索引从0开始,这就是为什么在此表达式中减去1的原因:md-active

链接到Plunker Demo

答案 1 :(得分:0)

试试这个:

httpget