Set Matte-radio-button-default ausgewählt, in der ein mat-radio-Gruppe mit angular2

Ich habe dieses problem in meinem angular app. Ich habe viele Optionen in einer mat-radio-Gruppe, aber diese sind dynamisch platziert, entsprechend, um ein json-Objekt. So etwas wie dieses:

Dies ist das json-Objekt

{
  "list": [
    {"name": "some name 1", ID: "D1"},
    {"name": "some name 2", ID: "D2"}
  ]
}

in diesem Beispiel gibt es nur zwei Objekte in meiner Liste, könnte aber die 9, 20, oder eine beliebige Anzahl von Objekten.

So, ich möchte, dass in meinem html ist, dass, egal wie viele Objekte sind, wird nur das erste ausgewählt ist, auch wenn die Liste ändern, nur das erste Objekt markiert bleiben.

Dies ist mein html:

<mat-radio-group name="opList"  fxLayout="column">
  <mat-radio-button *ngFor="let op of listOfOptions"  name="opList" >{{ op.name}}</mat-radio-button>
</mat-radio-group>

den listOfOptions variable haben, die das JSON-Objekt.

Wie ich immer ausgewählt, wird das erste Objekt?

InformationsquelleAutor Sergio Mendez | 2018-02-27

  1. 7

    Hinzufügen checked Eigenschaft in der JSON -

    {
  "list": [
    {"name": "some name 1", ID: "D1", "checked": true},
    {"name": "some name 2", ID: "D2", "checked": false}
  ]
}

    dann 

        <mat-radio-group name="opList"  fxLayout="column">
      <mat-radio-button *ngFor="let op of listOfOptions" 
      [checked]="op.checked" name="opList" >{{ op.name}}</mat-radio-button>
    </mat-radio-group>
    Der oben funktioniert nicht in diesem stackblitz. stackblitz.com/edit/... Immer diese Fehlermeldung: "ExpressionChangedAfterItHasBeenCheckederror: Ausdruck geändert hat, nachdem es überprüft wurde. Vorheriger Wert: "mat-radio-geprüft: true". Aktueller Wert: "mat-radio-geprüft: false,'."

    InformationsquelleAutor filipbarak

  2. 5

    Verwenden [value]="op.name" machen und eine Bindung an die Komponente variable wie [(ngModel)]="chosenItem"

    HTML:

    <mat-radio-group name="opList"  fxLayout="column" [(ngModel)]="chosenItem">
      <mat-radio-button *ngFor="let op of list" [value]="op.name" name="opList" >{{ op.name}}</mat-radio-button>
  </mat-radio-group>

    In der Komponente:

    list = [
    { "name": "some name 1", ID: "D1"},
    { "name": "some name 2", ID: "D2"}
]
chosenItem = this.list[0].name;
    Dies ist die richtige Antwort. In Winkel die geprüft/ausgewählte Element wird bestimmt durch den Wert gleich. In diesem Fall legen Sie den Wert im Bauteil (Modell) den gewünschten Wert für die ngmodel der gebundenen variable.

    InformationsquelleAutor Alexander Shershakov

  3. 0

    Hinzufügen let i = index zu den *ngFor, dann Haken [value] und [checked].

    <mat-radio-group>
  <mat-radio-button *ngFor="let o of options; let i = index" [value]="i" [checked]="i === 0">
<mat-radio-group>

    Dieser prüft die erste checkbox.

    InformationsquelleAutor Csaba

Schreibe einen Kommentar