Comment puis-je créer un rappel sur le matériel-angulaire-sélectionner?

Étonnamment je ne pouvais pas trouver un onselect de rappel, Alors comment puis-je créer un rappel sur matériel-angulaire-sélectionnez ?

C'est ma tentative

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 :(
    });
  }
}
<mat-select placeholder="Favorite food" [(ngModel)]="selectVal" (ngModelChange)="changeSelect()">
cela a fonctionné, ngModelChange œuvres

OriginalL'auteur ishandutta2007 | 2017-11-30

  1. 11

    Sélectionnez émet MatSelectChange événement à chaque changement. C'est outputed comme 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>
    non, ça ne marche pas. (selectionChange) il ne semble pas exister sur mat-select . Pouvez-vous m'indiquer les documents que vous êtes en train de parler?
    Il devrait fonctionner avec la dernière version de matériel. Si vous utilisez la version < 5.0.0 essayer (changement) au lieu de (selectionChange) car il a été rebaptisé. Voir: matériel.angulaire.io/composants/sélectionner/api et github.com/angular/material2/blob/master/CHANGELOG.md
    ngModelChange a fonctionné pour moi.
    je suis à l'aide de 5.x . je ne sais pas pourquoi selectionChange ne fonctionne pas. J'ai copier collé votre code exact.
    Angulaire 5 j'ai dû changer EventEmmiter<MatSelectChange> MatSelectChange pour en faire des œuvres.

    OriginalL'auteur Mateusz Witkowski

  2. 7

    J'ai eu un problème similaire et toujours besoin de la valeur à subscribable dans d'autres composants via un Service. Aussi, dans mon cas, le select n'est pas partie d'un formulaire. J'ai donc pensé que je vais laisser tomber ma solution angulaire/à l'article 5, dans le cas où quelqu'un d'autre tombe sur ceci:

    mon.service.ts

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

    Ce service est défini comme un fournisseur global dans app.modules.ts

    certains.composante.ts a la <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 souscrit aux modifications de la valeur

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

    ngOnInit() {
        this.__myService.myValue.subscribe(
            next => {
                //do something
            }
        );
    }
}
    (selectionChange) fonctionne très bien

    OriginalL'auteur masterfloda