selectedIndex не работает в md-tab-group при динамическом создании вкладок

Question

Я пытаюсь установить свойство selectedIndex md-tab-group в материале для угловых 2, чтобы я мог получить анимированную чернильную полосу под первой вкладкой. Это работало, когда вкладки были статически определены

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

Но когда я генерирую md-вкладки динамически, используя * ngFor, это не работает.

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

Есть предложения, что здесь происходит не так?

Answer 1

Попробуйте связать данные, а также поставить кавычки вокруг номера индекса.

[selectedIndex]="0"

Я проверил это в этом плунжере, и он работает.

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