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

【问题标题】：How to solve checkbox modifying other checkboxes state (not the model)?如何解决复选框修改其他复选框状态（不是模型）？
【发布时间】：2022-04-04 02:43:26
【问题描述】：

我有一个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

【问题讨论】：

你需要参考这个：stackoverflow.com/questions/39347773/…
见plunker：plnkr.co/edit/fXPfLTnotRgX2cm1jGyB?p=preview
@wannadream 您找到了我正在寻找的解决方案。请您发布答案以便我接受吗？（PS：你能把
```
{{models|json}}
```
添加到你的 plunker 中，这样我的 UI 看起来和我的一样，人们更容易发现差异吗？）

标签： angular checkbox

【解决方案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;
  }

【讨论】：

【解决方案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
      },
  ];

【讨论】：