Wie binden Modell mit kantigem Material <mat-button-toggle - >?

Werfen Sie einen Blick auf diese Plunker:
https://plnkr.co/edit/yu95hUrKlUh4Ttc5SwYD?p=preview

Wenn ich mit <mat-slide-toggle> ich bin in der Lage, ändern Sie die Werte in meine Komponente:

<mat-slide-toggle [(ngModel)]="myFlagForSlideToggle">Toggle me!</mat-slide-toggle>

myFlagForSlideToggle ist wie erwartet aktualisiert.

Aber wenn ich mit <mat-button-toggle>, die Werte werden nicht aktualisiert. Ich hatte, um ngDefaultControl um einmal dieses Beispiel funktioniert, aber ich bin mir nicht sicher, wie es ankommt.

<mat-button-toggle [(ngModel)]="myFlagForButtonToggle" ngDefaultControl>Toggle me!</mat-button-toggle>

Was ist die richtige Art zu binden, einen Knopf, um die Komponente?

InformationsquelleAutor Mateusz Stefek | 2017-11-02

  1. 20

    MatButtonToggle Komponente nicht umsetzen ControlValueAccessor daher können Sie nicht verwenden ngModel. ngDefaultControl eingeführt wurde, für andere Zwecke.

    MatButtonToggle soll ein Teil der mat-button-toggle-group. Aber wenn Sie wollen verwenden Sie es als ein standalone-Komponente und binden Sie das Modell, um es hier einige Beispiel, wie Sie es tun können:

    <mat-button-toggle 
  [checked]="myFlagForButtonToggle" 
  (change)="myFlagForButtonToggle = $event.source.checked">
    Toggle me!
</mat-button-toggle>

    Plunker Beispiel

    InformationsquelleAutor yurzui

  2. 6

    mat-button-toggle dont haben einen booleschen Wert und [(ngModel)] wird nicht funktionieren. Sehen doc.

    Diese schaltet kann so konfiguriert werden, Verhalten sich entweder als radio-buttons oder Checkboxen.

    ein Anwendungsfall kann sein, wie dies

    <mat-button-toggle-group  [(ngModel)]="myFlagForButtonToggle">
  <mat-button-toggle value="button1"  ngDefaultControl>Toggle me!</mat-button-toggle>
  <mat-button-toggle value="button2"  ngDefaultControl>Toggle me!</mat-button-toggle>
  <mat-button-toggle value="button3"  ngDefaultControl>Toggle me!</mat-button-toggle>
</mat-button-toggle-group>

    und ändern Sie Ihre boolean myFlagForButtonToggle :string;

    Kann nicht binden 'ngModel' da ist es nicht eine bekannte Eigenschaft der "mat-button-toggle-group'
    Alles funktioniert wie es sollte... nur import CommonModule für NgModel zu arbeiten...
    Genial. Andere Lösungen arbeiten, aber dies ist bei weitem die einfachste und am meisten "normale" für Daten verbindlich.
    Dies sollte sein die beste Antwort, das ist genau das design und die feature erwähnt in dem offiziellen Dokument. Aber ngModel lebt in FormModule, was bedeutet, dass import { FormsModule } from '@angular/forms'; ist erforderlich, um importiert werden, in AppModule

    InformationsquelleAutor Hareesh

  3. 5
    public selectedVal: string;
constructor() { }

ngOnInit(){
  this.selectedVal ='option1';
} 

public onValChange(val: string) {
  this.selectedVal = val;
}

 <mat-button-toggle-group #group="matButtonToggleGroup" [value]="selectedVal" (change)="onValChange(group.value)" >
  <mat-button-toggle value="option1">
    Option 1
  </mat-button-toggle>
  <mat-button-toggle value="option2">
    Option 2
  </mat-button-toggle>
</mat-button-toggle-group>

    InformationsquelleAutor Uliana Pavelko

  4. 4

    Wenn Sie versuchen, zu verwenden mat-button-toggle zum Umschalten zwischen Aktivierung /Deaktivierung von etwas, Sie verwenden eine Bindung auf mat-button-toggle-group, und stellen Sie sicher, dass die mat-button-toggle's sich die booleschen Werte true und false, nicht die string-Werte. Das heißt:

    <mat-button-toggle-group [(ngModel)]="isEnabled">
    <mat-button-toggle [value]="true"> Enable </mat-button-toggle>
    <mat-button-toggle [value]="false"> Disable </mat-button-toggle>
</mat-button-toggle-group>

    InformationsquelleAutor Andrew Favaloro

  5. 0

    Mit Winkel 6.1.3 und Eckig Material 6.4.6 Verwendung Slide Toggle (d.h., <mat-slide-toggle>)

    Vorlage

    <mat-slide-toggle [checked]="isAwesome"
   (change)="toggleIsAwesome()">
   Is TypeScript Awesome?
</mat-slide-toggle>

    Komponente

    export class AwesomeExampleComponent {
   //props
   isAwesome = false;

   //methods
   toggleIsAwesome() {
      this.isAwesome = !this.isAwesome;
      //could put additional logic here
   }
}

    Ich bin mit dieser Lösung, und es bequem im Einklang mit der Style Guide Regel:

    Tun setzen Präsentations-Logik in der component-Klasse, und nicht in der Vorlage.

    InformationsquelleAutor Eric D. Johnson

Schreibe einen Kommentar