动态生成选项卡时,selectedIndex 在 md-tab-group 中不起作用 [英] selectedIndex not working in md-tab-group when dynamically generating tabs
本文介绍了动态生成选项卡时,selectedIndex 在 md-tab-group 中不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在角度 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-tab 时,它不起作用.
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屋!
查看全文