javascript - Angular 8 mat-radio-button 动态检查

Question

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

<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"

虽然没有检查。

标签： javascriptangularcheckboxangular8

Answer 1

您不需要在 中设置值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>

演示