如何从 hashmap 初始化复选框 (Angular 2)

Question

我们如何初始化和操作复选框值？我已经查看了很多示例，但一直无法正常工作。

我正在尝试呈现一个 N x M table，其中行代表任务，列代表学生。这个想法是选中 table 中的一个复选框将任务分配给学生。

有一个包含所有 checkboxes 值的打字稿哈希映射；

assigned : { [key:string]:boolean; } = {};

哈希键是：

var key = a.TaskId + '_' + a.StudentId;

table 是用嵌套的 ngFor:

生成的

<tr *ngFor="let t of tasks">

  <td>Task Name for task... {{t.taskId}}&nbsp; &nbsp;</td>
  <td *ngFor="let s of students">

    <input type="checkbox" name=#{{t.TaskId}}_{{s.StudentId}} change="onAssignmentChange(t,s)" [checked]="cbValue(t, s)">

  </td>
</tr>

下面是cbValue(t, s)：

cbValue(taskItem, studentItem) {
   var key =  taskItem.TaskId + '_' +studentItem.StudentId;
   return this.assigned[key];
}

这不起作用，table 中的所有复选框都未选中，无论散列中的值是什么。

我也试过：

    <input type="checkbox"  change="onAssignmentChange(t,s)" [checked]="cbValue(t, s)">

    <input type="checkbox"  change="onAssignmentChange(t,s)" [(ngModel)]={{t.TaskId}}+'_'+{{s.StudentId}} >

    <input type="checkbox"  change="onAssignmentChange(t,s)" [(ngModel)]="assigned[t.TaskId"+'_'+"s.StudentId"]>

none 其中有效。

我这里好像是一头雾水； onAssignmentChange 也没有被触发，控制台中没有错误。

此外，

...  name=#{{t.TaskId}}_{{s.StudentId}}  ...

这应该是本地目标还是什么？

提前致谢

Answer 1

这很简单，因为我们将直接绑定到 assigned 对象，因为我们使用 JavaScript 的括号属性访问器，我们也得到了一个通过模板免费动态实例化属性（脏，也许，但功能强大）。此外，无论您稍后在何处处理此问题，都假设缺失值为 false：

模板

<tr *ngFor="let t of tasks">

        <td>Task Name for task... {{t.taskName}}&nbsp; &nbsp;</td>
        <td *ngFor="let s of students">

          <input type="checkbox" name="{{t.taskId}}_{{s.studentId}}" [(ngModel)]="assigned[t.taskId + '_' + s.studentId]">
        </td>
      </tr>

这里有一个 plunker 来演示：http://plnkr.co/edit/9RorhJnv42cCJanWb80L?p=preview

如何从 hashmap 初始化复选框 (Angular 2)

How to initialize checkbox from hashmap (Angular 2)

javascript

checkbox

ngfor

angular