在 *ngFor 中正确绑定单选按钮时遇到问题

Question

我正在尝试将数据驱动的单选按钮放入表格中。我已经成功地将按钮绑定到模型。但是，当我选择一个新选项时，它的行为非常奇怪。

底层模型工作正常，我可以通过在表中输出预期值来查看它。但是，当我单击单选按钮时，该列中的所有单选按钮都会被选中。

我看到其他人讨论这个问题，并且每个人都建议使用索引并引用数组对象。我已经这样做了，但它的行为仍然如上所述。

这里有一些快速示例代码：

component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  users = [
    {id: "amy", role: "admin"},
    {id: "bob", role: "noob"},
    {id: "glenn", role: "1337"},
    {id: "stacy", role: "client"},
  ]
}

component.html

<table class="table">
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Administrator</th>
    <th>Inspector</th>
    <th>Client</th>
  </tr>
  <tr *ngFor="let user of appData.users.users; let x = index;">
    <td>{{ user.name }}</td>
    <td>{{ user.email }}</td>
    <td>
      <div class="control">
        <input type="radio" [name]="appData.users.users[x].id+'-role'" value="admin" [(ngModel)]="appData.users.users[x].role">
      </div>
    </td>
    <td>
      <div class="control">
        <input type="radio" [name]="appData.users.users[x].id+'-role'" value="inspector" [(ngModel)]="appData.users.users[x].role">
      </div>
    </td>
    <td>
      <div class="control">
        <input type="radio" [name]="appData.users.users[x].id+'-role'" value="client" [(ngModel)]="appData.users.users[x].role">
      </div>
    </td>
    <td>{{x}}</td>
    <td>{{appData.users.users[x].role}}</td>
  </tr>
</table>

我整理了一个快速堆栈闪电战，显示了实际问题：https://stackblitz.com/edit/angular-tkptcn。请帮忙！

Answer 1

无线电组的名称必须匹配。下面的代码应该可以工作

<table>
  <tr>
    <th>user</th>
    <th>role</th>
    <th>admin</th>
    <th>noob</th>
    <th>1337</th>
    <th>client</th>
  </tr>
  <tr *ngFor="let user of users; let x=index;">
    <td>{{users[x].id}}</td>
    <td>{{users[x].role}}</td>
    <td><input type="radio" [name]="user" value="admin" [(ngModel)]="users[x].role"></td>
    <td><input type="radio" [name]="user" value="noob" [(ngModel)]="users[x].role"></td>
    <td><input type="radio" [name]="user" value="1337" [(ngModel)]="users[x].role"></td>
    <td><input type="radio" [name]="user" value="client" [(ngModel)]="users[x].role"></td>
  </tr>
</table>