动态生成制表符时，selectedIndex在md-tab-group中不起作用 [英] selectedIndex not working in md-tab-group when dynamically generating tabs

问题描述

我正在尝试在材质中为md 2设置md-tab-group的selectedIndex属性，以便可以在第一个选项卡下方获得动画墨水栏. 在静态定义标签时有效

I am trying to set selectedIndex Property of md-tab-group in material for angular 2 so that I can get animated ink bar below first tab. It worked when tabs were statically defined

<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时，它不起作用.

But when I am generating md-tabs dynamically using *ngFor, its not working.

<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>

有什么建议吗，这是怎么回事?

Any suggestions what is happening wrong here?

推荐答案

尝试数据绑定，并在索引号周围加上引号.

Try with data binding as well as putting quotes around the index number.

[selectedIndex]="0"

我在 plunker 中进行了测试，并且可以正常工作.

I tested it in this plunker, and it's working.

<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>

这篇关于动态生成制表符时，selectedIndex在md-tab-group中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！