Tengo este problema en mi aplicación angular. Tengo muchas opciones en un mat-radio-group 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 cantidad 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 seleccionado el primer objeto?
Agregue una propiedad checked en el JSON
{ "list": [ {"name": "some name 1", ID: "D1", "checked": true}, {"name": "some name 2", ID: "D2", "checked": false} ] }y luego
<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>Agregue let i = index a *ngFor , luego enganche [value] y [checked] a él.
<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.
Use [value]="op.name" y haga un enlace a su variable de 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;