Добавление атрибута класса html условно на зависание

Question

Я хочу добавить класс в строку таблицы при наведении. Я знаю, что может добавить классы, как это:

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

и класс «информация» будет добавлен в моем состоянии true. Но как я могу проверить, что моя таблица строк зависает? Я могу установить некоторую внутреннюю переменную в машинописном тексте на true на (mouseenter) и на false на (mouseleave), но это проблематично, если у меня есть много строк, сгенерированных *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 для функции, которая упростила бы требуемый здесь шаблон. Я сомневаюсь, что он приземлится до релиза, но ожидайте, что скоро это произойдет.