web-dev-qa-db-ja.com

* ngForで選択した行を強調表示するにはどうすればよいですか？

Angular2でこの問題を解決するのに役立つものが見つかりませんでした。行を選択するときにcssクラスを設定したいのですが。 （jQueryを使用せずに）

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

Angular2の最終リリースを使用しています

csstwitter-bootstrapangularhtml-table
6
Mourad Idrissi

これを行うための解決策はたくさんありますが、そのうちの1つは、クリックすると現在の会社を保存できることです。

_*ngFor_で、現在のアイテムが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"_を行います。

22
Joel Almeida