web-dev-qa-db-fra.com

Evénement de changement de bouton radio matériel Angular 4

J'essaie d'utiliser la sortie de modification d'un md-radio-buttons comme suit:

<md-radio-group [(ngModel)]="selected">
    <md-radio-button *ngFor="let a of array" [value]="a"
                 (change)="radioChange()">
        {{a}}
    </md-radio-button>
</md-radio-group>

TS:

selected: string;
filter: any;

radioChange() {
    this.filter['property'] = selected;
    console.log(this.filter);
}

Cela semble toujours être une étape derrière les boutons radio. c'est-à-dire que lorsque vous passez d'une sélection de radio A à radio B, la console.log enregistre la valeur de la radio A.

Toute aide serait très appréciée.

À votre santé,

P

angularangular-material2
9
Batters

Cela est dû au fait que l'événement change est déclenché avant la mise à jour du modèle. Donc, votre propriété selected a la valeur précédente. Modifiez votre code en suivant pour obtenir l'événement sur (change):

<md-radio-group [(ngModel)]="selected">
    <md-radio-button *ngFor="let a of array" [value]="a"
                 (change)="radioChange($event)">
        {{a}}
    </md-radio-button>
</md-radio-group>

... et dans votre classe, procédez comme suit:

import { MdRadioChange } from '@angular/material';
// ...

radioChange(event: MdRadioChange) {
    this.filter['property'] = event.value;
    console.log(this.filter);
}

Lien vers démonstration de travail .

24
Faisal

Définissez la propriété name et l'événement change sur mat-radio-group dans le fichier .html:

<mat-radio-group 
    name="radioOpt1" 
    [(ngModel)]="selectedRadio"
    (change)="radioChange($event)">
    <mat-radio-button *ngFor="let opt of options" 
        [value]="opt">{{opt}}</mat-radio-button>
</mat-radio-group>

Puis dans le fichier Component.ts:

import { MatRadioChange } from '@angular/material';
...

radioChange($event: MatRadioChange) {
    console.log($event.source.name, $event.value);

    if ($event.source.name === 'radioOpt1') {
        // Do whatever you want here
    }
}
12
Matt Oliveira