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

サンプル参照プランカー

これが役立つかどうかを確認してください。