* ngForで選択した行を強調表示する方法は？

Question

Angular2でこの問題を解決するのに役立つものが見つかりませんでした。私は行を選択するときにCSSクラスを設定したいと思います。

<table class="table table-bordered table-condensed table-hover"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Email</th> 
      <th>Website</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="let item of companies" (click)="selectedCompany(item, $event)"> 
      <td>{{item.name}}</td> 
      <td>{{item.email}}</td> 
      <td>{{item.website}}</td> 
     </tr> 
    </tbody> 
</table> 

（jQueryのを使用せずに）私はAngular2最終リリースを使用してい

は

Answer 1

これを行うためのソリューションの多くがありますが、そのうちの一つは、クリックしたとき、現在の会社を保存することができます。

では、現在の商品がcurrentCompanyであるかどうかをチェックし、同じ会社の場合はクラスhighlightedまたは任意のクラスを追加します。

テンプレート上

export class TableComponent { 

    public currentCompany; 

    public selectCompany(event: any, item: any) { 

    this.currentCompany = item.name; 
    } 

} 

そして：

<tr *ngFor="let item of companies" (click)="selectCompany($event, item)" 
[class.highlighted]="item.name === currentCompany"> 

-

別の解決策は、複数の強調表示会社を持っているしたい場合は、あなたのアイテムにプロパティhighlightedを追加することができます。次に、selectCompany()でプロパティをtrueに設定するだけです。あなたのチェックであなたは[class.highlighted]="item.highlighted"です。