fromEvent rxjs Angular 5 не работает должным образом

Question

Я создал радиокнопки из массива, т.е.

['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>

И теперь я хочу прослушать событие нажатия моего рекурсивного элемента, который я пытался использовать

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

, но проблемая сталкиваюсь с тем, что он вызывает событие только для первого варианта, т.е. да, когда я нажимаю Да, он показывает

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

, но даже не проверяет или console.log, когда нажимает Нет

Answer 1

Как @ConnorsFan говорит, что вы должны использовать ViewChildren вместо ViewChild.

Например, набранная версия:

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

или прямое взаимодействие с 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);
    });
  })  
}