hoverで条件付きでhtmlクラス属性を追加する

Question

hoverでテーブル行にクラスを追加したいと思います。私の条件はtrueとき

<tr [class.info]="isMyConditionTrue()"></tr> 

と「情報」のクラスが追加されます：私は、私はこのようなクラスを追加することができます知っています。しかし、私のテーブル行がぶら下がっているかどうかをどうやって確認するのですか？私は、(mouseenter)でtypescriptの中のいくつかの内部変数をtrueに、(mouseleave)でfalseに設定できますが、*ngForで生成されたたくさんの行があると問題があります。私は各行の別のコンポーネントを作成するか、いくつかのハッシュテーブルに格納する必要があります。 <tr #row [class.info]="row.hovered"></tr>のようなものを使ってこれを達成する方法はありますか？

Answer 1

@Component({ 
    selector: 'hover-info' 
    template: `<tr [class.info]="isHovered$ | async"></tr> 
}) 
class HoverRow { 

    _hovers$: Subject<boolean> = BehaviorSubject.create(); 
    isHovered$: Observable<boolean> = this._hovers$.last(); 

    @HostListener('mouseover') onMouseover =() => this._hovers$.next(true); 
    @HostListener('mouseout') onMouseout =() => this._hovers$.next(false); 

} 

AsyncPipeは強力なものです。

there's an open proposalここで必要な定型文を簡略化する機能に注意してください。私はそれがリリース前に着陸することは疑うが、その後すぐにそれが期待される。