Как правильно использовать Наблюдаемый список?

Question

Я использую Угловая 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 имеет значение NULL.

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); 
}