Angular2 - クラス属性の双方向データバインディング

Question

私はtwitterブートストラップタブを使用しています。ユーザーが別のタブを切り替えるときにliタグに適用されるactiveクラスを追跡したいと思います。クラス属性をコードからactivateに変更して、自分のカスタムボタンを使ってタブをアクティブにしたいので、クラス属性を追跡しています。

import {Component} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser'; 

@Component({ 
    selector: 'app', 
    template: ` 
    <div class="container-fluid" > 
    <ul class="nav nav-tabs" > 
     <li *ngFor="#tab of tabs" [(class)]="tab.class" ><a href="#{{tab.id}}" data-toggle="tab" >{{tab.id}}</a></li> 
    </ul> 
    <div class="tab-content"> 
     <div *ngFor="#tab of tabs" [(class)]="tab.contentClass" [id]="tab.id" >{{tab.id}} content goes here.</div> 
    </div> 
    </div> 
    <button (click)="openTab('tab1')" >Tab 1 Button</button> 
    <button (click)="openTab('tab2')" >Tab 2 Button</button> 
    ` 
}) 
class MainApp{ 
    public tabs = [ 
    {class: "active", id: "tab1", contentClass:"tab-pane active"}, 
    {class: "", id: "tab2", contentClass:"tab-pane"} 
    ] 

    openTab(id){ 
    var tabToActivate; 
    for(var i=0;i<this.tabs.length;i++){ 
     if(this.tabs[i].id == id) 
     tabToActivate = this.tabs[i]; 
     this.tabs[i].class = ""; 
     this.tabs[i].contentClass = "tab-pane"; 
    } 

    tabToActivate.class = "active"; 
    tabToActivate.contentClass = "tab-pane active"; 
    } 
} 
bootstrap(MainApp); 

を私が別のタブを切り替えると結合が一瞬のために動作しないものとカスタマイズされたタブボタンまたはを破る取得するようだ：私はこれを達成するために、次のコードを使用しています。なぜこうなった？

I plunkr here

クリックtab2

クリックTab Button 1の再生産の問題 - 動作しません。

Answer 1

あなたのプランナーに何らかのロジックエラーがあります。さて、以下のコードをチェックし、あなたのコーディング方法にしたがって作業してください。

working demo

<ul class="nav nav-tabs" > 
     <li *ngFor="#tab of tabs" (click)="openTab(tab.id)" [(class)]="tab.class" ><a href="#{{tab.id}}" data-toggle="tab" >{{tab.id}}. {{tab.class}}</a></li> 
</ul> 

openTab(id){   
    for(var i=0;i<this.tabs.length;i++){ 
     console.log('started' + id); 
     if(this.tabs[i].id != id) 
     { 
     this.tabs[i].class = ""; 
     this.tabs[i].contentClass = "tab-pane"; 
     } 
     else 
     { 
     this.tabs[i].class = "active"; 
     this.tabs[i].contentClass = "tab-pane active"; 
     } 
    } 
} 

Answer 2

私の代わりにngClassを使用します。

<li *ngFor="#tab of tabs" 
     [ngClass]="{active: tab.active}">...</li> 

アクティブプロパティは、タブ私のがアクティブかどう応じて、trueまたはfalseでなければなりません。

このリンクを参照してください：https://v2.angular.io/docs/js/latest/api/common/index/NgClass-directive.html。