web-dev-qa-db-fra.com

Définir le bouton radio mat par défaut sélectionné dans un groupe radio mat avec angular2

J'ai eu ce problème dans mon angular. J'ai beaucoup d'options dans un groupe mat-radio mais celles-ci sont placées dynamiquement en fonction d'un objet json. Quelque chose comme ceci:

Ceci est l'objet json

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

dans cet exemple, il n'y a que deux objets dans ma liste, mais cela peut être 9, 20 ou n'importe quel nombre d'objets.

Donc, je veux que dans mon html, peu importe le nombre d'objets, seul le premier est sélectionné, même si la liste change, le premier objet reste sélectionné.

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

la variable listOfOptions a l'objet JSON.

Comment définir toujours le premier objet sélectionné?

angularangular-material
9
Sergio Mendez

Ajouter une propriété checked dans le JSON

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

puis

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

Utilisez [value]="op.name" Et créez une liaison à votre variable Component comme [(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>

Dans votre composant:

list = [
    { "name": "some name 1", ID: "D1"},
    { "name": "some name 2", ID: "D2"}
]
chosenItem = this.list[0].name;
7
Alexander Shershakov

Ajouter let i = index à la *ngFor, puis accrocher [value] et [checked] à elle.

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

Cela vérifiera le tout premier bouton radio.

4
Csaba

Vous pouvez utiliser [vérifié] = 'vrai' avec le premier bouton radio en HTML.

Si vous souhaitez modifier la valeur cochée, vous pouvez également la définir dynamiquement.

 <mat-radio-group >
     <mat-radio-button [checked]='true'>yes </mat-radio-button>
</mat-radio-group>
0
sharad jain

J'ai eu ce problème également. J'utilisais angular matériau 7 et j'ai essayé avec [vérifié] = "i == 0" mais pour une raison quelconque, cela n'a pas fonctionné. J'ai également essayé d'ajouter un nouveau champ booléen à mon JSON objet nommé isDefault, puis en utilisant [vérifié] = "obj.isDefault" sans résultat. En fin de compte, je l'ai finalement résolu en définissant la valeur par défaut de la méthode OnInit. Je sais que cela signifie un peu plus de code, mais il c'est ce qui l'a résolu pour moi.

ici vous pouvez voir un exemple

0
LH7

Pour ceux qui recherchent toujours la bonne réponse, je suivrais la documentation: ici avec un petit ajout à ngOnInit ():

et ça va - TS:

import {Component, OnInit} from '@angular/core';


@Component({
  selector: 'radio-btns-test',
  templateUrl: 'radio-btns-test.html',
  styleUrls: ['radio-btns-test.css'],
})
export class RadioBtnsTest implements OnInit {
                             // data source for the radio buttons:
  seasons: string[] = ['Winter', 'Spring', 'Summer', 'Autumn'];

                             // selected item
  favoriteSeason: string;

                             // to dynamically (by code) select item
                             // from the calling component add:
  @Input() selectSeason: string;



  ngOnInit() {
                             // To have a default radio button checked
                             // at the page loading time (fixed solution)
      this.favoriteSeason = 'Summer';

                             // OR  (do only one)
                             // To dynamically (by code) select item
                             // from the calling component add:
      this.favoriteSeason = this.selectSeason;
  }

}

HTML:

<label id="example-radio-group-label">Pick your favorite season</label>

<mat-radio-group
  aria-labelledby="example-radio-group-label"
  class="example-radio-group"
  [(ngModel)]="favoriteSeason">

  <mat-radio-button 
       class="example-radio-button" 
       *ngFor="let season of seasons" 
       [value]="season">
    {{season}}
  </mat-radio-button>

</mat-radio-group>

<div>Your favorite season is: {{favoriteSeason}}</div>

CSS

.example-radio-group {
  display: flex;
  flex-direction: column;
  margin: 15px 0;
}

.example-radio-button {
  margin: 5px;
}

Pour terminer l'exemple - avec le lancement du test radio-btn à partir d'un autre composant, appelez-le comme ceci:

<radio-btns-test [selectSeason]="'Summer'"></radio-btns-test>
0
Felix