Tengo este problema en mi aplicación angular. Tengo muchas opciones en un grupo mat-radio, pero estas se colocan dinámicamente de acuerdo con un objeto json. Algo como esto:

Este es el objeto json

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

En este ejemplo, solo hay dos objetos en mi lista, pero podrían ser 9, 20 o cualquier número de objetos.

Entonces, quiero que en mi html sea que no importa cuántos objetos haya, solo se selecciona el primero, incluso si la lista cambia, solo el primer objeto permanece seleccionado.

Este es mi 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 tiene el objeto JSON.

¿Cómo configuro siempre el primer objeto seleccionado?

9
Sergio Mendez 27 feb. 2018 a las 19:47

6 respuestas

La mejor respuesta

Agregar una propiedad checked en la JSON

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

Y entonces

    <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>
14
filipbarak 27 feb. 2018 a las 16:51

Use [value]="op.name" y haga un enlace a su variable Componente como [(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>

En su componente:

list = [
    { "name": "some name 1", ID: "D1"},
    { "name": "some name 2", ID: "D2"}
]
chosenItem = this.list[0].name;
9
Alexander Shershakov 30 may. 2018 a las 15:16

Agregue let i = index a *ngFor, luego enganche [value] y [checked].

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

Esto verificará el primer botón de radio.

6
Csaba 21 nov. 2019 a las 10:02

Yo tuve este problema también. Estaba usando material angular 7 y probé con [marcado] = "i == 0" pero por alguna razón, no funcionó. También intenté agregar un nuevo campo booleano a mi objeto JSON llamado isDefault, y luego usar [check] = "obj.isDefault" sin resultados. Al final, finalmente lo resolví estableciendo el valor predeterminado del método OnInit. Sé que significa un poco más de código, pero es lo que lo resolvió para mí.

aquí puedes ver un ejemplo

1
LH7 28 ago. 2019 a las 23:07

Puede usar [marcado] = 'verdadero' con el primer botón de opción en HTML.

Si desea cambiar el valor marcado, también puede configurarlo dinámicamente.

 <mat-radio-group >
     <mat-radio-button [checked]='true'>yes </mat-radio-button>
</mat-radio-group>
1
sharad jain 4 oct. 2019 a las 13:04

Para aquellos que todavía están buscando la respuesta correcta, seguiría la documentación: aquí con una pequeña adición en ngOnInit ():

Y se 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;
}

Para completar el ejemplo, con el inicio de la prueba de radio-btn desde otro componente, llámelo así:

<radio-btns-test [selectSeason]="'Summer'"></radio-btns-test>
2
Felix 5 ene. 2020 a las 05:38