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 :(
    });
  }
}

Answer 1

材质选择会在每次更改时发出MatSelectChange事件。它被视为选择改变。

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

Answer 2

我遇到了类似的问题，仍然需要通过服务在其他组件中订阅该值。此外，在我的情况下，选择不是表单的一部分。所以我想我会放弃我的角度/材料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
            }
        );
    }
}

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

2 个答案: