在 Angular 2 中使用 HostListener/Binding 和 NgFor 元素

Question

我有用户列表。我希望当光标悬停在按钮上时，它将*ngIf 设置为 true，然后显示有关用户的信息（当光标离开按钮时显示为 false）。

user-list.html:

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

user-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（用户：用户）”： (click)='toggleUser(user)'，但是我现在想要 onHover 而不是点击。

我在 Angular.io 网站上看到了关于指令属性的教程，在 HostBinding('ngIf') 上看到了 StackOverflow 主题。

Hostbinding ngIf in 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`

如何以 Angular 2 风格实现此功能？

Answer 1

你忘了把变量绑定到元素上

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

Your directive isn't working?

你还记得在声明属性中添加指令吗？ @NgModule？很容易忘记！在浏览器工具中打开控制台 并寻找这样的错误：

例外：模板解析错误：无法绑定到“myHighlight”，因为 它不是 'p' 的已知属性。

Angular 检测到你正在尝试绑定到某个东西，但它不能 在模块的声明数组中找到这个指令。后 在声明数组中指定 HighlightDirective，Angular 知道 它可以将指令应用到此模块中声明的组件。