Angular 从输入（）中选中“角度材质”单选按钮

我有以下html文件

<mat-menu #appMenu="matMenu" class="mat-menu-panel-max-width-none">
<mat-radio-group #radioGroup>
<div *ngFor="let item of items, let i=index">
      <mat-radio-button color="primary"
       [value]="item.value"
       [checked]="item.selected"
       class="mat-menu-item"
       (change)="handleSelection(i)">
   {{item.name}}
  </mat-radio-button>
    </div>
</mat-radio-group>
 </mat-menu>

以下是我的代码正在执行的步骤：

从菜单中选择一个项目

结果被发送到ngrx存储

可观察选择器将新输入值items设置为“item.selected=false”

在此之后，我仍然看到该项目被选中。目的是在每次操作后重置所有未选中的项

---

怎么了？

而不是试图手动管理单选按钮的“选中”状态。我个人会尝试利用本机HTML功能，并为收音机提供相同值的相同“name”值，或者如果您使用被动表单，formControlName属性也将完成相同的任务。当用户从表单中选择时，他们会自己“勾选”和“取消勾选”。

我会更改您的标题，以包括您正在使用角度材质点的事实。已更改。避免不创建与对象属性同名的变量<代码>electionHandler.emit（{id:id}）这里，

id

是属性，而另一个

id

是函数中传递的变量。虽然与问题的内容无关，但已获取要点。每次选择后，我需要将所有单选按钮重置为“未选中”。这是我的需求，因为Input（）项与父组件中的可观察提要不同。

  import { Component, EventEmitter, Input, Output } from '@angular/core';
  @Component({
    selector: 'item-selection',
    templateUrl: './item-selection.component.html',
 })
export class ItemsComponent {
 @Input() items: any;
 @Output() electionHandler = new EventEmitter();

 constructor() { }

 handleSelection(id) {
 electionHandler.emit({id:id});
 }
 }