Question

我正在制作班次安排应用程序。在其中我试图创建两个表格，显示每个用户选择的可能的班次。

两个表都显示相同的数据，但排列方式不同。每个表格单元格都有多个复选框，显示每个人（表1中）或可能的班次人员（表2）中可能的班次。表1中显示人员X的班次A选项的复选框将具有与表2中的等效复选框相同的数据绑定，表格2显示班次A的人员X选项。

这样做的目的是当用户将一个人与班次结合时，同时更新两个表中的等效数据。问题：当选中/取消选中表1中的复选框时，表2中的所有复选框都会被选中/取消选中，如下所示：

这是我的模板：

<div class="table-container" dir="ltr">
  <h3>People</h3>
  <table>
    <thead>
      <th>Name</th>
      <th>Options</th>
    </thead>
    <tbody>
      <tr *ngFor="let user of userPreferences">
        <td>{{user.name}}</td>
        <td>
          <div *ngFor="let selection of userYesses[user.name]">
            <mat-checkbox class="option-checkbox" dir="ltr" [(ngModel)]="selection.isSelected" name="usc">{{selection.option}}</mat-checkbox>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<div class="table-container" dir="ltr">
  <h3>Shifts</h3>
  <table>
    <thead>
      <th>Time</th>
      <th>Options</th>
    </thead>
    <tbody>
      <tr *ngFor="let shift of totalShifts">
        <td dir="ltr">{{shift.time}}</td>
        <td>
          <div *ngFor="let selection of shiftYesses[shift.time]">
            <mat-checkbox class="option-checkbox" [(ngModel)]="selection.isSelected" name="syc">{{selection.name}}</mat-checkbox>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

以下是相关的组件代码：

  this.userPreferences.forEach(u => {
    this.userYesses[u.name] = [];
    u.preferences.shifts.forEach(week => {
      week.forEach(day => {
        if (!day.shifts) return;
        day.shifts.forEach(shift => {
          if (!this.shiftYesses[`${day.date} ${shift.time}`]) this.shiftYesses[`${day.date} ${shift.time}`] = [];
          if (shift.isSelected) {
            let selection = new Selection(`${day.date} ${shift.time}`, u.name);
            this.userYesses[u.name].push(selection);
            this.shiftYesses[`${day.date} ${shift.time}`].push(selection);
          }
        });
      });
    });
  });

代码似乎对我好，我错过了什么吗？也许它是Angular中的一个错误？

提前致谢！

Answer 1

如果其他人遇到此问题 -

经过几天的挣扎之后，我偶然发现了Angular's git中的这个问题 - https://github.com/angular/angular/issues/9230

我在kara的回答中读到了以下内容：

如果您不想注册表单控件，则目前有几个选项：

1 - 在表单标记的上下文之外使用ngModel。这永远不会抛出。

<input [(ngModel)]="person.food">

阅读本文后，我将<form>标记切换为<div>，现在一切正常。

即使ngModel没有，Angular复选框也会更新

1 个答案: