Kendo UI TabStrip无法选择默认选项卡

时间:2016-10-26 11:33:25

标签: angular kendo-ui kendo-ui-angular2

我正在尝试在我的页面中动态添加Kendo-UI tabstrip

我可以添加它,但之后我无法将其作为默认值打开。

我使用过的代码如下。

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
     <kendo-tabstrip [ngStyle]="{'width': '400px'}">
        <kendo-tabstrip-tab
          *ngFor="let item of items let i=index"
          [title]="item.city"
          [height]="height"
          [selected]="i == selected"
          [disabled]="item.disabled"
        >
            <span class="rainy">&nbsp;</span>
            <div class="weather">
                  <h2>{{item.temp}}<span>&ordm;C</span></h2>
                  <p>Rainy weather in {{item.city}}.</p>
            </div>
        </kendo-tabstrip-tab>
      </kendo-tabstrip>
    `
})

export class AppComponent {
  public selected: number = 0;
  public height: string = "300px";
  public items: any = [{
            disabled: false,
            city: "Paris",
            temp: 17
      }, {
            disabled: false,
            city: "New York",
            temp: 29
      }, {
            disabled: false,
            city: "Sofia",
            temp: 23
      }]

  constructor(){

    let a={
            city: "New Paris",
            temp: 20
      };

     setTimeout(() => {
      this.items.splice(0, 0, a);
      console.log(this.items);

      }, 100);

  }

}

1 个答案:

答案 0 :(得分:0)

您可以加载动态标签页并选择默认标签,如下所示 -

return

参考样本Plunker

看看这是否有帮助。