web-dev-qa-db-fra.com

Comment obtenir l'identifiant de la valeur sélectionnée dans l'option Mat-Select de Angular 5

Comment obtenir l'identifiant de la valeur de l'option sélectionnée dans mat-select angular 5. Obtenez uniquement la valeur de l'option sélectionnée dans onchangeevent. Mais comment obtenir l'identifiant de la valeur de l'option sélectionnée.

 client.component.html
<mat-form-field>
    <mat-select placeholder="Client*" #clientValue  (change)="changeClient($event)">
    <mat-option  *ngFor="let client of clientDetails"   [value]="client.clientName">
      {{client.clientName |  json}}
    </mat-option>
  </mat-select>
</mat-form-field>

client.component.ts file
export class Client{
     changeClient(event){
     console.log(event);
 }
}
angularangular-material-5
11
AtmanSangeetha

Pour cela, vous devez:

Changement (change)="changeClient($event)" à (change)="changeClient($event.value)"

et de [value]="client.clientName" à [value]="client.id"

<mat-form-field>
    <mat-select placeholder="Client*" #clientValue  (change)="changeClient($event.value)">
    <mat-option  *ngFor="let client of clientDetails"   [value]="client.id">
      {{client.clientName}}
    </mat-option>
  </mat-select>
</mat-form-field>

WORKING DEMO

22
Vivek Doshi

La question est spécifique à Angular 5, mais pour les autres qui viennent ici avec une version plus récente de Angular, le (change) événement ne fonctionnera pas pour mat-select.

Dans Angular 6 le (change) événement a été changé en (selectionChange).

Donc ce serait:

<mat-form-field>
    <mat-select placeholder="Client*" #clientValue  (selectionChange)="changeClient($event.value)">
    <mat-option  *ngFor="let client of clientDetails" [value]="client.id">
      {{client.clientName}}
    </mat-option>
  </mat-select>
</mat-form-field>

Et dans le composant:

changeClient(value) {
    console.log(value);
}

De cette réponse et la documentation .

15
Stack Underflow

Vous pouvez également vous abonner aux changements de valeurs de la mat-select en utilisant le décorateur ViewChild et ngAfterViewInit qui est moins 'intrusif en HTML'.

Voici un exemple :

[HTML]

<mat-form-field [floatLabel]="auto">
    <mat-label>Type</mat-label>
        <mat-select #matSelect required> //the #matSelect is important here
            <mat-option *ngFor="let type of types" [value]="type.value">
                {{type.viewValue}}
            </mat-option>
    </mat-select>
</mat-form-field>

[TS]

 import { Component, ViewChild, AfterViewInit } from '@angular/core';
 import { MatSelect } from '@angular/material';

 @Component({
        selector: 'app-export-security-pack-material',
        templateUrl: './export-security-pack-material.component.html',
        styleUrls: ['./export-security-pack-material.component.scss']
 })

 export class ExportSecurityPackMaterialComponent implements AfterViewInit {

    constructor() {}

    types: Object[] = [
        { value: 'example-value-0', viewValue: 'ExampleViewValue0' 
        },
        { value: 'example-value-1', viewValue: 'ExampleViewValue1' }
    ];

    @ViewChild('matSelect') matSelect: MatSelect;
       //Reference Variable //variable Name //Type

    ngAfterViewInit() {
        this.matSelect.valueChange.subscribe(value => {
            console.log(value);
        });
    }
 }

Avec cela, votre valeur doit être enregistrée dans la console de développement Ctrl+Shift+I ou F12 à chaque fois que vous modifiez la valeur de votre sélecteur.

ou vous pouvez littéralement le faire si vous n'avez pas besoin de changement:

[HTML]

<mat-form-field [floatLabel]="auto">
    <mat-label>Type</mat-label>
        <mat-select [(value)]="matSelectValue" required> <---
            <mat-option *ngFor="let type of types" [value]="type.value">
                {{type.viewValue}}
            </mat-option>
    </mat-select>
</mat-form-field>
0
Noé KlK