Радиокнопка обновления материала Angular 7 проверяется динамически

Question

У меня есть приложение Angular Material с переключателями. Я хочу обновить выбранную кнопку на основе данных из БД. Это все работает, за исключением того, что проверенная кнопка обновляется, только когда что-то происходит на странице (например, щелчок мышью). Нужно ли запускать обнаружение изменений?

HTML

<mat-radio-group name="animals" (change)="saveAnimal($event)">
   <mat-radio-button *ngFor="let option of animalOptions"
            [checked]="option.checked" value="{{option.value}}">{{option.label}}
  </mat-radio-button>
</mat-radio-group>

Component.ts

public animalOptions: any = [
      {label: 'cat', value: '1', checked: true},
      {label: 'dog', value: '2', checked: false}];

Затем после вызова API получить данные в ngOnInit:

if (this._choice.animal === 'cat') {
          this.animalOptions[0].checked = false;
          this.animalOptions[1].checked = true;
        }

Answer 1

Код, которым вы поделились для динамического рендеринга и манипулирования значениями группы переключателей материала, верен. Проблема, скорее всего, в том, как / где this._choice.animal оценивается. Если это значение извлекается через что-то вроде HttpClient get (), обязательно оцените this._choice.animal внутри subscribe() или then(), если это Promise<T>:

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

@Component({
  selector: 'radio-overview-example',
  templateUrl: 'radio-overview-example.html',
  styleUrls: ['radio-overview-example.css'],
})
export class RadioOverviewExample {
  public animalOptions: any = [
    { label: 'cat', value: '1', checked: true },
    { label: 'dog', value: '2', checked: false }
  ];

  public _choice: any;

  ngOnInit() {
    this.getSomeApiValue().subscribe(result => {
      this._choice.animal = result;

      if (this._choice.animal === 'cat') {
        this.animalOptions[0].checked = false;
        this.animalOptions[1].checked = true;
      }
    });
  }
}

Вот пример в действии.

Надеюсь, это поможет!