【问题标题】：Manage array of radio elements with Angular individually使用 Angular 单独管理无线电元素数组
【发布时间】：2019-04-26 00:11:14
【问题描述】：

我正在为 Angular 应用程序编写代码，我需要从“平台”列表中单独管理单选按钮。

“平台”是一个具有多个属性的接口，其中一个表示平台的状态，可以是“完成”、“待定”、“未分配”三个之一。

我有平台数组并在模板中渲染每个平台，最初收音机的默认值设置为“未分配”，但是当我更改它时，即使仅为平台单独更新属性-item，视觉上所有平台都会改变值。

我正在使用 [(ngModel)] 绑定，并且复选框 (isENGCam) 正在按我的预期工作，也就是说，如果我选中一个复选框，只有这个复选框被标记，但是对于无线电元素，我遇到了一种奇怪的行为。

组件

...
platformPositions: Array<Position> = [];
...
...
...
    for (let i = 0; i < _positions; i++) {

      let _position = {
        id: i,
        isENGCam: false,
        booker: '-',
        cameraNumber: '',
        comments: '',
        status: 'unassigned',
        sap: '-'
      }
  
      this.platformPositions.push(_position);
    }
...
...
...

模板

...
<div *ngFor="let position of platformPositions; let i = index">
...

 <span class="bold">Status</span>{{position.status}}<br>
 <div class="ml-2">
  <input type="radio" [(ngModel)]="position.status" ng-checked='position.status==completed' value="completed"><span class="ml-1">Completed</span>{{position.status=='completed'}}<br>
  <input type="radio" [(ngModel)]="position.status" ng-checked='position.status==pending' value="pending"><span class="ml-1">Pending</span>{{position.status=='pending'}}<br>
  <input type="radio" [(ngModel)]="position.status" ng-checked='position.status==unassigned' value="unassigned"><span class="ml-1">Unassigned</span>{{position.status=='unassigned'}}
 </div>
...

</div>

查看粘贴的图像，我预计只有红色突出显示被更新，但其他单选按钮保持其值。

对我来说很奇怪，其他平台项目的属性值被保留了，但在视觉上选择的选项发生了变化。

【问题讨论】：

所有单选按钮都具有相同（不存在）的名称。每组 3 个无线电必须具有相同的名称，与所有其他组的名称不同。另外，删除 ng-checked
我将 name 属性添加为 name="status-{{ i }}"，它起作用了。我从 Angular 开始，并认为绑定 [(ngModel)] 是设置名称的方式，那我错了。非常感谢。

标签： angular

【解决方案1】：

根据@JB Nizet 的评论，下面是代码更改，使其按我的预期工作：

<span class="bold">Status</span><br>
<div class="ml-2">
<input type="radio" name="status-{{ i }}" [(ngModel)]="position.status" value="completed"><span class="ml-1">Completed</span><br>
<input type="radio" name="status-{{ i }}" [(ngModel)]="position.status" value="pending"><span class="ml-1">Pending</span><br>
<input type="radio" name="status-{{ i }}" [(ngModel)]="position.status" value="unassigned"><span class="ml-1">Unassigned</span>
</div>

【讨论】：