如何在列表中正确使用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');
}

它会显示错误:

EXCEPTION: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是空值.