分别使用Angular管理无线电元素阵列

Question

我正在为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>

查看粘贴的图像，我希望只有红色高亮像素被更新，但其他单选按钮仍保留其值。

对我来说，保留其他平台项目的属性值是很奇怪的，但是在视觉上所选的选项已更改。

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