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;
      }
    });
  }
}

这里是example的动作。

希望有帮助！

动态检查Angular 7材质更新单选按钮

1 个答案: