fromEvent rxjs Angular 5 工作不正常

Question

I have create radio buttons from an array ie

['Yes','No']
<mat-radio-group class="tt" style="display: inline-block" formControlName="recursive" >
<div class="opt" *ngFor="let t of tarrif_type_arr">
<mat-radio-button value={{t}} name="recursive" #recursive id="recursive" [checked]="checked" >{{t}</mat-radio-button>      
</div>
</mat-radio-group>

And now i want to listen for the click event of my recursive element i tried using

@ViewChild('recursive',{ read: ElementRef }) recur:ElementRef;
ngAfterViewInit()
{
let clickObservable$=fromEvent(this.recur.nativeElement,'click').subscribe(res=>{
  console.log(res);
})
} 

but the issue i am facing is its triggering the event only for first option ie yes whenever i click on Yes it shows

MouseEvent {isTrusted: true, screenX: 2084, screenY: 410, clientX: 498, clientY: 308, …}

but it doesn't even check or console.log when click on No

Answer 1

As @ConnorsFan says you have to use ViewChildren instead of ViewChild .

For example the typed version:

@ViewChildren(MatRadioButton) recur: QueryList<MatRadioButton>;
ngAfterViewInit()
{
  this.recur.forEach(c => {
    // here your goal
    fromEvent(c._nativeElement,'click').subscribe(res=>{
      console.log(res);
    });
  })  
} 

or direct interact with ElementRef:

@ViewChildren(MatRadioButton, { read: ElementRef }) recur: QueryList<ElementRef>;
ngAfterViewInit()
{
  this.recur.forEach(c => {
    // here your goal
    fromEvent(c.nativeElement,'click').subscribe(res=>{
      console.log(res);
    });
  })  
}