如何在列表中正确使用 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: Cannot read property 'nativeElement' of null

当鼠标移入每个元素时，我希望它使用 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);
}

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

How to use Observable correctly in a list?

rxjs

typescript

rxjs5

angular