使用 MatSelect 和 rxjs fromEvent 事件没有被听到？ （选择更改）

Question

我正在尝试使用 rxjs fromEvent 从 MatSelect 获取值。我不能让它知道发生了一个事件。我让它与 MatInput 一起使用，因为我认为它继承了 Html 输入元素的默认行为，但 MatSelect 有所不同。

如果我将 mat-select 换成默认选择，则会拾取（更改）事件并按预期工作。 （更改）在 MatSelect 上的某个时候显然已被弃用，并且不再有效。

我尝试将模板 ID 移动到 mat-option 以查看它是否可以从那里获取事件，但没有运气。 试过： （改变） （选择） （选择更改） (值变化)

 @ViewChild('projectNameInput', {static: false, read: ElementRef}) projectNameInput: ElementRef;
 @ViewChild('pipelineSelect', {static: false, read: ElementRef}) pipelineSelect: ElementRef;
 @ViewChild('codeCoverageInput', {static: false, read: ElementRef}) codeCoverageInput: ElementRef;

 ngAfterViewInit() {
   // server-side search
   const projectObs$ = fromEvent(this.projectNameInput.nativeElement, 'keyup');
   const selectObs$ = fromEvent(this.pipelineSelect.nativeElement, 'onSelectionChange');
   const coverageObs$ = fromEvent(this.codeCoverageInput.nativeElement, 'keyup');

   const all$ = merge(projectObs$, selectObs$, coverageObs$)
     .pipe(
       debounceTime(300),
       distinctUntilChanged(),
       tap(() => {
         this.paginator.pageIndex = 0;
         this.loadSummariesPage();
       })
     )
     .subscribe();

   this.paginator.page
     .pipe(
       tap(() => this.loadSummariesPage())
     )
     .subscribe();
 }

------------------------------------

 <mat-form-field appearance="fill">
   <mat-label>types</mat-label>
   <mat-select name="type" [(ngModel)]="type">
     <mat-option #x *ngFor="let option of options" [value]="option.value">
       {{option.viewValue}}
     </mat-option>
   </mat-select>
 </mat-form-field>

Answer 1

如果您有Observable，如果您想接收流数据，则需要订阅它。

在您的组件代码中，您需要以下内容：

selectObs$.subscribe(selectedVal => console.log(selectedVal));

注意：记得在OnDestroy组件事件中取消订阅，防止内存泄漏。

更新

1 - 在您的组件中，您应该绑定 matSelect 而不是 matOption。然后你可以听 selectionChange 发射器（就像一个 Observable）：

 @ViewChild(MatSelect) select: MatSelect;

模板中完全不需要#x。

2 - 您是否尝试过从以下位置更改线路：

const selectObs$ = fromEvent(this.pipelineSelect.nativeElement, 'onSelectionChange');

到

const selectObs$ = fromEvent(this.pipelineSelect.nativeElement, 'selectionChange');

我从未使用过 nativeElement 的事件，但 matSelect 有一个 EvenEmitter selectionChange: EventEmitter<MatSelectChange>，因此可能是命名不匹配。

3- 使用 selectionChange 发射器：

<mat-select name="type" [(ngModel)]="type">
     <mat-option #x (selectionChange)="onValueSelected()" *ngFor="let option of options" [value]="option.value">
       {{option.viewValue}}
     </mat-option>
 </mat-select>