如何解决复选框修改其他复选框状态（不是模型）？

Question

我有一个for，它遍历布尔变量数组中的元素，并使用每个布尔值作为复选框的模型。 models数组如下所示：

  models = [true,false,true,true,false,false,true];

模板如下所示：

<h1>Hello {{name}}</h1><br>
<div *ngFor="let mod of models; let i=index">
    <input [(ngModel)]="models[i]" type="checkbox">
</div>
<pre>{{models|json}}</pre>

单击复选框时，随机元素也会更改它的状态。

不确定这是不是错误，或者我只是不理解某些内容。

如何使此复选框的行为正确？

https://plnkr.co/edit/siTXHoIF3OuXnZd37yir?p=preview＆lt; - 显示此行为的完整示例

感谢先进的任何帮助！

Answer 1

请参阅我编辑的plunker：https://plnkr.co/edit/fXPfLTnotRgX2cm1jGyB?p=preview

基本上，您需要在ngFor：How to set bindings in ngFor in Angular 2?

中跟踪对象

在模板中：

<h1>Hello {{name}}</h1><br>
<div *ngFor="let mod of models; let i=index,trackBy:trackByIndex">
    <input [(ngModel)]="models[i]" type="checkbox" (click)="onClick(i)">
</div>
<pre>{{models}}</pre>

在component.ts中：

  trackByIndex(index: number, obj: any): any {
    return index;
  }

Answer 2

我修改了你的代码，使用一个对象数组作为模型而不是一个普通的布尔数组。这对我来说似乎有些惯用，它解决了你的问题。

使用这种方法你也可以为模板中的每个复选框添加label字段和其他信息，并在模板中使用它，所以一般来说我认为这是处理事情的更好方法。

使用Angular 2可能有更好的方法来解决这个问题，但我自己并不熟悉它，抱歉。

https://plnkr.co/edit/8561HPbx7hDcHsTVq1C4?p=preview

models = [
      {
        selected : true
      },
      {
        selected : false
      },
      {
        selected : true
      },
      {
        selected : true
      },
      {
        selected : false
      },
      {
        selected : false
      },
      {
        selected : true
      },
  ];