Angular2 - HostListener/Binding с элементом NgFor

Question

У меня есть список пользователей. Я хочу, чтобы при наведении курсора на кнопку он устанавливал *ngIf в true, а затем отображает информацию о пользователе (и false, когда курсор покидает кнопку).

пользователя list.html

<div *ngFor="let user of users">
  <h1>{{user.name}}</h1>
  <div onUserHover *ngIf="ngIf">
    <p>{{user.description}}</p>
  </div>
</div>

пользовательский list.component.ts

import { Component, OnInit } from '@angular/core';
import { User } from 'class/user';
import { UserService } from 'user/user.service';

@Component({
  selector: 'user-list',
  templateUrl: 'user-list.component.html',
  providers: [UserService]
})
export class UserListComponent implements OnInit {
  users: User[];

  constructor(private userService: UserService) {
  };

  ngOnInit(): void {
    this.getUsers();
  }

  getUsers(): void {
    this.userService.getUsers().then(users => this.users = users);
  }

  toggleUser(user: User): void {
    user.active = !user.active;
  }
}

Я использовал "toggleUser(user: User)" вот так -> (click)='toggleUser(user)', но теперь я хочу использовать onHover вместо click.

Я видел учебник об атрибутах директив на веб-сайте Angular.io и тему stackOverflow о HostBinding('ngIf').

Привязка хостов в Angular2

onUserHover.directive.ts

 import { Directive, ElementRef, HostBinding, HostListener } from '@angular/core';

@Directive({ selector: '[onUserHover]' })
export class OnUserHoverDirective {

    constructor(private el: ElementRef) {
    }

    @HostBinding('ngIf') ngIf: boolean;

    @HostListener('mouseenter') onMouseEnter() {
        console.log('onMouseEnter');
        this.ngIf = true;
    }

    @HostListener('mouseleave') onmouseleave() {
        this.ngIf = false;
    }
}

Но у меня есть одна ошибка в браузере:

Can't bind to `ngIf` since it isn't a known property of `div`

Что я могу сделать, чтобы реализовать эту функцию в стиле Angular2?

Answer 1

То, что вы забыли, это привязать переменную к элементу

<div onUserHover [ngIf]="ngif" *ngIf="ngIf">

Ваша директива не работает?

Вы не забыли добавить директиву к атрибуту объявлений @NgModule? Это легко забыть! Откройте консоль в инструментах браузера и найдите ошибку, подобную этой:

ИСКЛЮЧЕНИЕ: ошибки синтаксического анализа шаблона: невозможно связать с myHighlight, поскольку оно не является известным свойством p.

Angular обнаруживает, что вы пытаетесь связать что-то, но не может найти эту директиву в массиве объявлений модуля. После указания HighlightDirective в массиве объявлений, Angular знает, что может применить директиву к компонентам, объявленным в этом модуле.