Возникли проблемы с правильной привязкой переключателей внутри * ngFor - PullRequest
Новая
       41

Возникли проблемы с правильной привязкой переключателей внутри * ngFor

0 голосов
/ 14 января 2019

Я пытаюсь поместить управляемые данными переключатели в таблицу. Я успешно смог привязать кнопки к модели. Однако это ведет себя очень странно, когда я выбираю новую опцию.

Базовая модель работает нормально, я могу видеть это, выводя ожидаемые значения в таблицу. Однако, когда я нажимаю переключатель, все переключатели в этом столбце выбираются.

Я видел, как другие обсуждали проблемы с этим, и каждый рекомендовал использовать индекс и обращаться к объекту массива. Я сделал это, но он все еще ведет себя, как описано выше.

Вот небольшой пример кода:

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. Пожалуйста, помогите!

1 Ответ

0 голосов
/ 14 января 2019

Названия радиогруппы должны совпадать. код ниже должен работать 

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