Я получил эту проблему в моем угловом приложении. У меня есть много опций в mat-radio-group, но они динамически размещаются в соответствии с объектом json. Что-то вроде этого:

Это объект JSON

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

В этом примере в моем списке всего два объекта, но это может быть 9, 20 или любое количество объектов.

Итак, я хочу, чтобы в моем html было независимо от того, сколько объектов, выбран только первый, даже если в списке изменился только первый объект, оставшийся выбранным.

Это мой 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>

Переменная listOfOptions имеет объект JSON.

Как мне всегда установить выбранный первый объект?

24
Sergio Mendez 27 Фев 2018 в 19:47

6 ответов

Лучший ответ

Добавьте свойство checked в JSON

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

А потом

    <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 Фев 2018 в 16:51

Используйте [value]="op.name" и создайте привязку к вашей переменной Component, например [(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>

В вашем компоненте:

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

Добавьте let i = index к *ngFor, затем подключите [value] и [checked] к нему.

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

Это проверит самую первую радио-кнопку.

6
Csaba 21 Ноя 2019 в 10:02

У меня тоже была эта пробема. Я использовал угловой материал 7, и я попытался с помощью [check] = "i == 0", но по какой-то причине это не сработало. Я также попытался добавить новое логическое поле в мой объект JSON с именем isDefault, а затем с помощью [checked] = "obj.isDefault" безрезультатно. В конце концов, я наконец решил это, установив значение по умолчанию из метода OnInit. Я знаю, что это означает немного больше кода, но это то, что решило его для меня.

здесь вы можете увидеть пример

1
LH7 28 Авг 2019 в 23:07

Вы можете использовать [checked] = 'true' с первой радиокнопкой в HTML.

Если вы хотите изменить проверенное значение, вы также можете установить его динамически.

 <mat-radio-group >
     <mat-radio-button [checked]='true'>yes </mat-radio-button>
</mat-radio-group>
1
sharad jain 4 Окт 2019 в 13:04

Для тех, кто все еще ищет правильный ответ, я бы следовал документации: здесь с одним небольшим дополнением в ngOnInit ():

И это идет - 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;
}

Для завершения примера - при запуске radio-btn-test из другого компонента назовите его так:

<radio-btns-test [selectSeason]="'Summer'"></radio-btns-test>
2
Felix 5 Янв 2020 в 05:38