有可能在剑道角度标签中创建动态标签吗

Question

当我从左侧菜单单击时，我想创建tabstrip并将其附加到选项卡内部。我创建了我的所有组件，并将这些组件用作动态选项卡的内容。

剑道角形Tabstrip布局可能吗？

感谢

Answer 1

您可以使用内置的ngFor让组件的模板循环到组件上定义的集合变量上，以动态显示选项卡。

看看这个例子。如果要添加或删除tabs变量，它将动态地反映在DOM中。

组件模板：

<kendo-tabstrip>
<kendo-tabstrip-tab *ngFor="let tab of tabs; let first = first" [title]="tab.header" [selected]="first">
<ng-template kendoTabContent>
<div class="content">
<img [src]="tab.body.image" />
<h2>{{ tab.body.degrees }}<span>ºC</span></h2>
<span>{{ tab.body.description }}</span>
</div>
</ng-template>
</kendo-tabstrip-tab>
</kendo-tabstrip>

组件中声明的变量：

tabs = [
{
header: 'Paris',
body: {
image:
'https://www.telerik.com/kendo-angular-ui-develop/components/layout/assets/tabstrip/rainy.png',
degrees: '17',
description: 'Rainy weather in Paris.',
},
},
{
header: 'New York City',
body: {
image:
'https://www.telerik.com/kendo-angular-ui-develop/components/layout/assets/tabstrip/cloudy.png',
degrees: '19',
description: 'Cloudy weather in New York City.',
},
},
{
header: 'Tallinn',
body: {
image:
'https://www.telerik.com/kendo-angular-ui-develop/components/layout/assets/tabstrip/sunny.png',
degrees: '23',
description: 'Sunny weather in Tallinn.',
},
},
{
header: 'London',
body: {
image:
'https://www.telerik.com/kendo-angular-ui-develop/components/layout/assets/tabstrip/rainy.png',
degrees: '16',
description: 'Rainy weather in London.',
},
},
];

堆叠闪电战：https://stackblitz.com/edit/angular-iwwkxv