fromEvent rxjs Angular 5 не работи правилно

Създадох радио бутони от масив, т.е

['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, когато щракнете върху Не


angular rxjs angular5
person Benson OO    schedule 18.10.2019    source източник
comment
Опитайте с ViewChildren вместо ViewChild.   -  person ConnorsFan    schedule 18.10.2019
comment
Защо не използвате FormBuilder? След това можете да позволите на Angular да генерира входове за вас и да улавя техните входове чрез Angular.   -  person StefanN    schedule 18.10.2019

Отговори (1)


arrow_upward
1
arrow_downward

Както казва @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);
    });
  })  
}
person Agustin Seifert    schedule 18.10.2019