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>

现在我要监听递归元素的click事件我尝试使用

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

fromEvent rxjs Angular 5无法正常工作

1 个答案: