如何在列表中正确使用 Observable？

Question

我正在使用 Angular 2。

当我只有一个元素时，我可以先使用nativeElement，然后再使用Observable。

<div #aaa></div>

@ViewChild('aaa') private aaa: ElementRef;
ngAfterViewInit() {
  console.log(Observable.fromEvent(this.aaa.nativeElement), 'mouseenter');
}

但是现在我有一个列表，我不能用同样的方法来做：

<a *ngFor="#user of users" #aaa (mouseenter)="mouseEnter($event, user)">
  {{user}}
</a>

@ViewChild('aaa') private aaa: ElementRef;
ngAfterViewInit() {
  console.log(Observable.fromEvent(this.aaa.nativeElement), 'mouseenter');
}

它会显示错误：

异常：TypeError：无法读取 null 的属性“nativeElement”

当鼠标移入每个元素时，我希望它使用 Observable 做不同的事情。在这种情况下如何正确使用 Observable？

Answer 1

就如何在此处尝试做的事情而言，我建议：

@Component({
  template: `
    <a *ngFor="#user of users" (mouseenter)="mouseEnters$.next({event: $event, user: user})">
    {{user}}
  </a>
  `
})
class YourComponent { 
   mouseEnters$: Subject<data:{event: MouseEvent, user: any}> = BehaviorSubject.create();

   ngAfterViewInit(){ //you don't actually need to wait for afterViewInit anymore
       this.mouseEnters$.subscribe((data:{event:MouseEvent, user: any}) => /* do whatever */)
   }
}

就你得到异常的原因而言 - 你不能将模板变量放在带有ngFor 的元素上（当你意识到元素重复时这是有道理的...... )，因此@ViewChild 为空。

Answer 2

这取决于你以后想用user 或event、Observable 和ViewChild 做什么似乎有点过头了，就这样吧：

<a *ngFor="#user of users" #aaa (mouseenter)="mouseEnter($event, user)">
  {{user}}
</a>

mouseEnter(event, user) {
  console.log(event, user);
  //do smth. i.e. this.eventEmitter.emit(user);
}