Material der radio-button "change" - Ereignis Winkel-4

Ich bin versucht, das zu ändern-Ausgang ein md-radio-Tasten wie folgt:

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

Dieser scheint immer einen Schritt hinter den radio-buttons. d.h. beim ändern der Auswahl von radio-Ein radio-B, es-Konsole.melden Sie den Wert der radio A.

Jede Hilfe wäre sehr geschätzt werden.

Cheers,

P

Radio-Liste mit [(ngModel)] Beispiel-Anwendung freakyjolly.com/how-to-show-radio-input-listing-in-angular-6

InformationsquelleAutor Batters | 2017-09-22

  1. 17

    Dies geschieht, weil das change-Ereignis wird ausgelöst, bevor das Modell wurde aktualisiert. So Ihr selected Eigenschaft hat der Vorherige Wert. Ändern Sie Ihren code, um Folgendes zu erhalten die Veranstaltung auf (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>

    ... und in der Klasse haben, tun Sie den folgenden: 

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

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

    Link zu funktionsfähige demo.

    Super, danke. Das löst das radio ändern-Problem perfekt. Noch scheint nicht zu aktualisieren, das Rohr obwohl. Neue, sollte ich teilte diese Frage in zwei und akzeptiere Ihre Antwort? Auch ist die Methode übergeben $event mit kantigem material 2 Komponenten Teil eine weitere Lektion, dass es irgendwelche gute tutorials?
    Aufgeteilt in zwei. Lesen Sie über die Veranstaltungen finden Sie hier: learnangular2.com/events
    Mit Winkel-5 müssen Sie es importieren MatRadioChange von '@eckig/material", der Veranstaltung, die Sie erhalten in Ihrem radioChange () - Methode ist vom Typ MatRadioChange und Sie nicht haben, um die (Wechsel -) Veranstaltung auf alle mat-radio-button. Sie können einfach legte es auf die Matte-radio-Gruppe.

    InformationsquelleAutor Faisal

  2. 9

    Set name Eigentum und change event zu mat-radio-group.html-Datei:

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

    Dann in der Komponente.ts-Datei:

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

    InformationsquelleAutor Matheus Abreu

Schreibe einen Kommentar