从 Input() 检查角度材料单选按钮答案

【问题标题】：Angular material radio button checked from Input()从 Input() 检查角度材料单选按钮
【发布时间】：2018-06-27 01:28:31
【问题描述】：

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

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

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

怎么了？

【问题讨论】：

我会更改您的标题以包含您使用角材料的事实
好点。改变了。
避免创建与对象属性同名的变量。 electionHandler.emit({id:id}); 这里，id 是属性，另一个 id 是函数中传递的变量。
点虽然与问题的要求无关。

标签： angular angular-material

【解决方案1】：

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

【讨论】：

我需要在每次选择后将所有单选按钮重置为“未选中”。这是我的要求，因为 Input()，项目，从父组件中的可观察提要发生变化。