从Input（）检查角度材料单选按钮

Question

我有以下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>

还有ts文件。

  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});
 }
 }

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

1. 从菜单中选择一个项目。
2. 结果将发送到ngrx存储。
3. 可观察的选择器将新的输入值，项目设置为“ item.selected = false”。
4. 此后，我仍然看到该项目被选中。目的是在每次操作后重置所有未选择的项目。

怎么了？

Answer 1

与其尝试手动管理单选按钮的“已检查”状态，不如尝试。我个人将尝试利用本机HTML功能，并为收音机提供相同值的“名称”值，或者如果您使用的是“响应式表单”，则formControlName属性也将完成相同的操作。当用户从表单中选择时，他们自己会“选中”和“取消选中”。