动态生成选项卡时,selectedIndex在md-tab-group中不起作用

时间:2017-07-24 20:02:35

标签: tabs angular-material2 ngfor

我正在尝试在材质中为角度2设置md-tab-group的selectedIndex属性,以便我可以在第一个选项卡下面获得动画墨水条。 当标签被静态定义时它起作用

<md-tab-group>
    <md-tab label="Tab 1">Content 1</md-tab>
    <md-tab label="Tab 2">Content 2</md-tab>
</md-tab-group>

但是当我使用* ngFor动态生成md-tabs时,它无效。

<md-tab-group selectedIndex= 0 class="inner-tab">
        <md-tab *ngFor="let rule of ruleList">
            <ng-template md-tab-label>{{getOutputTabTitle(rule)}}</ng-template>
            <view-plan-validations [validatorsList]="rule.ruleOutputList"></view-plan-validations>
        </md-tab>
    </md-tab-group>

有什么建议在这里发生错误吗?

1 个答案:

答案 0 :(得分:1)

尝试使用数据绑定以及在索引号周围加上引号。

[selectedIndex]="0"

我在这个plunker中进行了测试,它正在运行。

<md-tab-group [selectedIndex]="2">
  <md-tab *ngFor="let tab of tabs">
    <ng-template md-tab-label>
      {{ tab.label }}
    </ng-template>
    <h1>{{ tab.body }}</h1>
  </md-tab>
</md-tab-group>