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

Question

我正在尝试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);

  }

}

Answer 1

您可以加载动态选项卡并像这样选择默认选项卡 -

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 = 1;
  public height: string = "300px";
  public items: any = [{
            disabled: true,
            city: "Paris",
            temp: 17
      }, {
            disabled: false,
            city: "New York",
            temp: 29
      }, {
            disabled: false,
            city: "Sofia",
            temp: 23
      }]
}

参考样本Plunker

看看这是否有帮助。