2016-10-25 13 views
1

コンポーネントにAngular2とブートストラップを使用しています。 * ngForループからのテストのプロパティ "2"がnewTestという名前のインポートされた変数と等しい場合、私はtrタグにクラスを追加しようとしています。 しかし、それはクラスを追加していません。角度2 - * ng For条件付きクラス

は、ここに私のコンポーネントです:テーブルが正しく表示され

loadTest() { 
     this.testService.getTests() 
     .then((data) => { 
      this.tests = data 
     }) 
    } 

ngOnInit() { 
     this.loadTest(); 
    } 

が、クラスはありません。

条件は完全に満たされていますが、ここで

は私のhtmlです:

<div class="table-responsive"> 
    <table class="table table-hover table-reflow"> 
     <thead> 
      <tr> 
       <th>1</th> 
       <th>2</th> 
       <th>3</th> 
       <th>4</th> 
       <th>5</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr *ngFor="let test of tests" [class.newDevice]="test.2 === this.newTest" [attr.class]="test.1" > 
       <th>{{test.1}}</th> 
       <th>{{test.2}}</th> 
       <th>{{test.3}}</th> 
       <th>{{test.4}}</th> 
       <th>{{test.5}}</th> 
      </tr> 
     </tbody> 
    </table> 
</div> 

私は間違って何かをやっていますか? 私も、jQueryを使って同じことを達成しようとしました:

loadTest() { 
      this.testService.getTests() 
      .then((data) => { 
       this.tests = data 
    if (NewTest.length !== undefined) { 
        let index = this.tests.findIndex((e) => { return e.2 === NewTest }) 
        let test = this.tests[index].id 
        jQuery(test).addClass("newDevice"); 
       } 
      }) 
     ) 
+0

なぜあなたは '[class.newDevice]'と '[attr.class]'を持っていますか?これらの2つはお互いに優先されていませんか? – martin

+1

AFAIK 'attr.class'は避けるべきです(例えば、Safariモバイルで問題を引き起こします)。代わりに '[ngClass]'を使用してください。 –

+0

これを試してください: '[ngClass] =" {'newDevice':test.2 == newTest} "'? – rinukkusu

答えて

3

[class.newDevice][attr.class]はお互いをオーバーライドしています。

関連する問題