1

我有用户列表。我希望当光标悬停在按钮上时，它设置*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（user：User）”： (click)='toggleUser(user)'但是我现在想要一个onHover而不是点击。

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

Angular2中的主机绑定ngIf

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 风格实现此功能？

4

1 回答 1

0

您忘记了将变量绑定到元素

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

你的指令不起作用？

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

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

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

于 2017-03-31T12:02:32.063 回答