Angular 8 mat-radio-button 动态检查

Question

我使用 mat-radio-button 的属性 [checked] 检查了我的值。

<div class="mb-3" *ngIf="!multiple" class="ttb-filter-list">
    <mat-radio-group class="d-flex flex-column" aria-labelledby="group-radio" [(ngModel)]="radioValue">
        <mat-radio-button *ngFor="let option of filteredOptions | async" [value]="option" color="primary" [checked]="option.checked">
            {{ option.name }}
        </mat-radio-button>
    </mat-radio-group>
</div>

正如您所见，id 为 mat-radio-2 的单选按钮为 ng-reflect-checked="true"

虽然没有检查。

Answer 1

编辑：@adrita-sharma 的回答显示了正确的做法

我的第一个想法是你的属性 radioValue 没有正确设置为应该检查的内容。

如果不是请提供一个stackblitz来重现

Answer 2

不需要设置checked中的值，需要通过ngModel

设置

例如：

.ts

  filteredOptions = [
    { id: 1, name: "abc" },
    { id: 2, name: "xyz" }
  ];

  radioValue = 2

.html

<mat-radio-group class="d-flex flex-column" aria-labelledby="group-radio" [(ngModel)]="radioValue">
  <mat-radio-button *ngFor="let option of filteredOptions" [value]="option.id" color="primary">
    {{ option.name }}
  </mat-radio-button>
</mat-radio-group>

Demo

Angular 8 mat-radio-button 动态检查

Angular 8 mat-radio-button checked dynamically

javascript

angular

checkbox

angular8