剣道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

あなたはダイナミックタブをロードし、this-

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

を参照してください参照してください。