У меня есть список пользователей. Я хочу, чтобы при наведении курсора на кнопку он устанавливал *ngIf
в значение true, а затем отображал информацию о пользователе (и false, когда курсор покидает кнопку).
список пользователей.html
<div *ngFor="let user of users">
<h1>{{user.name}}</h1>
<div onUserHover *ngIf="ngIf">
<p>{{user.description}}</p>
</div>
</div>
список пользователей.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 (пользователь: пользователь)» следующим образом -> (щелчок) = «toggleUser (пользователь)», однако теперь я хочу использовать onHover вместо щелчка.
Я видел учебник об атрибутах директив на веб-сайте Angular.io и тему stackOverflow на HostBinding('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`
Что я могу сделать, чтобы реализовать эту функцию в стиле Angular2?
this
, ссылающейся на элемент HTML вместо вашего класса. Вместо этого попробуйте привязать функцию к вашему классу. - person Randy   schedule 31.03.2017ngIf
на самом деле очень плохо названное логическое значение, а не модуль AngularngIf
. - person Randy   schedule 31.03.2017*ngIf="ngIf"
- person n00dl3   schedule 31.03.2017@HostBinding('ngIf') ngIf: boolean;
- person Randy   schedule 31.03.2017[(ngModel)]
, и с использованиемEventEmitter
в дочернем элементе... Однако зависание несуществующего элемента для меня загадка... - person n00dl3   schedule 31.03.2017