如何在material-angular-select上创建回调函数？

Question

令人惊讶的是我找不到onselect回调函数，那么我如何在material-angular-select上创建回调函数？

这是我的尝试

import { Component, Input, Output, OnInit, OnChanges, SimpleChanges, ChangeDetectionStrategy, EventEmitter } from '@angular/core';    
import { BehaviorSubject } from 'rxjs/BehaviorSubject';    
import { FormControl } from '@angular/forms';
import { MatSelectModule } from '@angular/material/select';

@Component({
  selector: 'app-search-navigator',
  template: `
    <mat-form-field>
      <mat-select [(value)]="selected" [formControl]="pc" panelClass="example-panel-{{pc.value}}">
        <mat-option *ngFor="let panelColor of panelColors" [value]="panelColor.value">
          {{ panelColor.viewValue }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  `,
  changeDetection: ChangeDetectionStrategy.Default
})
export class SearchNavigatorComponent implements OnInit {
  private selected ;
  private selectedObs$;
  private pc = new FormControl('red');
  private panelColors = [
    {value: 'red', viewValue: 'red'},
    {value: 'blue', viewValue: 'blue'},
    {value: 'green', viewValue: 'green'}
  ];
  constructor() {}

  ngOnInit() {
    this.selectedObs$ = new BehaviorSubject<any>(this.selected);
    this.selectedObs$.subscribe((aselected) => {
      console.log(aselected);//Nothing happens on select :(
    });
  }
}

- ishandutta2007

---

<mat-select placeholder="Favorite food" [(ngModel)]="selectVal" (ngModelChange)="changeSelect()"> - Sachila Ranawaka

这个有效，ngModelChange起作用了。 - ishandutta2007

Answer 1

当选择材料时，Material select会在每次更改时发出MatSelectChange事件。它的输出被称为selectionChange。

 <mat-form-field>
      <mat-select [(value)]="selected" [formControl]="pc" panelClass="example-panel-{{pc.value}}" (selectionChange)="doSomething($event)">
        <mat-option *ngFor="let panelColor of panelColors" [value]="panelColor.value">
          {{ panelColor.viewValue }}
        </mat-option>
      </mat-select>
    </mat-form-field>

- Mateusz Witkowski

---

好的。你记得在组件中声明doSomething函数了吗？ - Mateusz Witkowski

显然是的 :) - ishandutta2007

尝试使用（change）代替（selectionChange）。这对于5版本之前的版本应该有效。尝试设置两个事件，看看是否可以工作。 - Zivko

使用Angular 5时，我必须将EventEmitter<MatSelectChange>更改为MatSelectChange才能使其工作。 - Walfrat

@Walfrat 谢谢！同样的问题。 - Stanislav Machel

Answer 2

我有一个类似的问题，仍然需要将值通过服务订阅到其他组件中。此外，在我的情况下，选择器不是表单的一部分。因此，我想在这里分享我的解决方案，针对 angular/material 5，以防其他人遇到相同问题：

my.service.ts

@Injectable()
export class MyService {
    myValue: BehaviorSubject<number> = new BehaviorSubject(1);
}

这个服务在app.modules.ts中被定义为全局提供者。

some.component.ts使用了<mat-select>组件。

@Component({
    templateUrl: './some.component.html',
})
export class SomeComponent {
    constructor(private __myService: MyService) {
    }

    selectValue = this.__myService.myValue.value;

    changeValue($event: EventEmitter<MatSelectChange>) {
        this.__myService.myValue.next($event.value);
    }
}

some.component.html

<mat-select
    [value]="selectValue"
    (selectionChange)="changeValue($event)"
    placeholder="Select a value"
>
    <mat-option [value]="1">Option 1</mat-option>
    <mat-option [value]="2">Option 2</mat-option>
    <mat-option [value]="3">Option 3</mat-option>
</mat-select>

other.component.html 订阅值的变化。

export class OtherComponent implements OnInit {
    constructor(private __myService: MyService) {
    }

    ngOnInit() {
        this.__myService.myValue.subscribe(
            next => {
                // do something
            }
        );
    }
}

- masterfloda