web-dev-qa-db-fra.com

Comment créer un rappel sur matériau-sélection angulaire?

Étonnamment, je n'ai pas pu trouver de rappel onselect, alors comment créer un rappel sur material-angular-select ?

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 :(
    });
  }
}
angularangular-materialobservable
14
ishandutta2007

La sélection de matériaux émet un événement MatSelectChange à chaque changement. Il est sorti en tant que 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>
11
Mateusz Witkowski

J'ai eu un problème similaire et j'avais toujours besoin de la valeur pour être abonné dans d'autres composants via un service. De plus, dans mon cas, la sélection ne fait pas partie d'un formulaire. J'ai donc pensé laisser tomber ma solution pour angular/material 5, au cas où quelqu'un d'autre tomberait dessus:

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

some.component.ts a le <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 s'abonne aux changements de valeur

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

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