Angular 8 mat-radio-button 动态检查答案

【问题标题】：Angular 8 mat-radio-button checked dynamicallyAngular 8 mat-radio-button 动态检查
【发布时间】：2021-07-26 14:09:24
【问题描述】：

我使用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"

Is 没有被检查。

【问题讨论】：

能否请你为它创建一个stackBlitz？！
请提供 stackblitz 链接。
你能显示filteredOptions数组

标签： javascript angular checkbox angular8

【解决方案1】：

编辑：@adrita-sharma 的回答显示了如何正确处理

我的第一个想法是您的属性 radioValue 未正确设置为应检查的内容。

如果不是，请提供一个堆栈闪电来重现

【讨论】：

如果我删除 [(ngModel)] 它可以工作，那么问题出在 radioValue 上，但为什么呢？我们不能将 [(ngModel)] 与预先检查的值一起使用吗？
radioValue 必须设置为您列表中的一个值，以便能够预先检查它
看看@adrita-sharma 的答案就是我的意思

【解决方案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

【讨论】：

是的，这就是我想说的 :) 我应该添加一个代码示例
很好，当我的值是一个对象时，我的 ngmodel 实际上是一个字符串。我会努力改变的
是的，该值应该是您在 ngModel 中设置的值
我们不能传递像{ id: 1, name: "abc" } 这样的对象吗？我必须只传递一个值吗？
应该是数字、字符串、布尔等基本类型