как сделать переключатель с матовой кнопкой выбранным по умолчанию, отображая ключ и отправляя значение, связанное с ключом

Question

У меня есть несколько кнопок радио.Я хочу выбрать один вариант по умолчанию.Я где-то читал, что [проверено] должно работать.Я сделал такую ​​структуру данных, но она не работает.

  <mat-radio-group class="example-radio-group" [(ngModel)]="favoriteSeason" >
  <mat-radio-button class="exmple-radio-button" *ngFor="let season of seasons" [value]="season.value" [checked]="season.checked">
    {{season.key}}-{{season.checked}}
  </mat-radio-button>
</mat-radio-group>
<div class="example-selected-value">Your favorite season is: {{favoriteSeason}}</div>

ts

  export class RadioNgModelExample {
      favoriteSeason = '';
      seasons = [
        {
    key: 'Winter',
    checked: false,
    value: 1
        },
           {
    key: 'Spring',
    checked: true,
     value: 2
        },{
        key: 'Summer',
    checked: false,
     value: 3  
        },{
          key: 'Autumn',
    checked: false,
     value: 4      
        }];
    }

stackblitz

Answer 1

Удалите [(ngModel)]="favoriteSeason" на <mat-radio-group class="example-radio-group">, и это будет работать.

Или просто измените ваш файл Ts на:

export class RadioNgModelExample {
  favoriteSeason: string ;
  seasons = [
    {
      key: 'Winter',
      checked: false
    },
    {
      key: 'Spring',
      checked: true
    },{
      key: 'Summer',
      checked: false  
    },{
      key: 'Autumn',
      checked: false      
    }];

  constructor() {
    this.favoriteSeason= 'Spring'

    // **As well as this**
    // this.favoriteSeason= this.seasons[1].key;

  }
} 

Здесь обновлен стек стека

Answer 2

Вам нужно инициализировать переменную favoriteSeason.В вашем примере вы устанавливаете только тип, а не значение.Вам нужно favoriteSeason = 'Spring'.Это инициализирует значение favoriteSeason (ngModel, используемая группой переключателей) в строку 'Spring'.

favoriteSeason: 'Spring' - это объявление типа.Вы объявляете это свойство типа 'Spring'.Это скорее всего непреднамеренно.Вы также можете включить объявление типа: favoriteSeason: string = 'Spring', но это также не нужно, так как тип может быть выведен.