Javascript 动态检查角度8垫单选按钮

我使用

mat单选按钮的属性
[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>


{{option.name}

您可以看到id为
mat-radio-2
的单选按钮为
ng reflect checked=“true”


但是，没有检查

编辑：来自@adrita sharma的答案展示了如何正确操作

我的第一个想法是，您的属性radioValue没有正确设置为应该检查的值

如果没有，请提供stackblitz来复制
您不需要在选中的
中设置值，它应该通过
ngModel

例如：

.ts

.html


{{option.name}

你能为它创建一个stackBlitz吗？！请提供stackblitz链接。能否显示
filteredOptions
Arrays如果删除[（ngModel）]，问题在于radioValue是否有效，但原因是什么？我们不能使用带有预检查值的[（ngModel）]吗？radioValue必须设置为列表中的一个值才能进行预检查查看@adrita sharma的答案这就是我的意思，这就是我想说的：）我应该添加一个代码sampleNice，实际上，当我的值是一个对象时，我的ngModel是一个字符串。我将尝试更改它是的，值应该是您在ngmodel中设置的值。我们不能传递一个像
{id:1，name:“abc”}
这样的对象吗？我必须只传递一个值吗？它应该是一个基本类型，如数字、字符串、布尔值
  filteredOptions = [
    { id: 1, name: "abc" },
    { id: 2, name: "xyz" }
  ];

  radioValue = 2

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