在选中和取消选中复选框时传递参数答案

【问题标题】：Passing parameters on checking and un-checking of a checkbox在选中和取消选中复选框时传递参数
【发布时间】：2020-10-25 21:04:08
【问题描述】：

我是 Angular 和打字稿的新手。我在以下要求中需要某人的帮助。我有一个网页，其中有一个复选框列表，如下所示：

我在 component.ts 文件中定义了一个 isChecked 布尔变量，并使用 ngModel 与模板进行了数据绑定。当复选框被选中或取消选中时，将调用函数 onChange()。我想将两个参数传递给函数。一个是选中/取消选中值，即真/假，另一个是包含单击复选框标签的字符串值。例如，如果检查 st1，则将调用 onChange(check, 'st1')。如果未选中，组件类内部的逻辑会将“st1”添加到数组中。

在我这样写的模板中：

<ul> 
    <li [(ngModel)]="student" *ngFor="let student of studentsToLOad" [value]="student">
     <b>{{student.name}}</b>
     <input type="checkbox" id="present"  name="present" [(ngModel)]="isChecked" 
       (change)="onChange(isChecked, student)"/>
    </li>
</ul>

但是当我点击 st1 时，所有其他复选框也被选中。请帮忙。

【问题讨论】：

标签： html angular typescript

【解决方案1】：

ngModel 值设置为单个变量 isChecked。此变量传递给所有复选框。所有复选框都将根据 isChecked 反映它们的状态。你可以使用一些类似 student.checked 的东西。您可以在 onChange 函数中设置值。

onChange(isChecked, student) {
  student.isChecked = isChecked;
}

<ul>
  <li [(ngModel)]="student" *ngFor="let student of studentsToLOad" [value]="student">
    <b>{{student.name}}</b>
    <input type="checkbox" id="present" name="present" [(ngModel)]="student.isChecked" (change)="onChange(isChecked, student)" />
  </li>
</ul>

【讨论】：

在您建议的更改后，复选框按预期工作。但是当它第一次加载时，名字并没有出现。单击后，名称就会出现。

【解决方案2】：

发生错误是因为所有复选框都绑定到单个全局布尔标志isChecked。

您可以从li 元素中删除ngModel 和value，并将input 元素中的ngModel 绑定到学生特定的布尔值而不是全局布尔值标志。试试下面的

控制器

export class AppComponent  {
  studentsToLOad = [
    { name: 'st1', status: false },
    { name: 'st2', status: false },
    { name: 'st3', status: false },
    { name: 'st4', status: false },
  ];

  onChange(status, name) {
    console.log(name, status);
  }
}

模板

<ul> 
  <li *ngFor="let student of studentsToLOad">
    <b>{{student.name}}</b>
    <input type="checkbox" id="present"  name="present" [(ngModel)]="student.status" 
      (change)="onChange(student.status, student.name)"/>
  </li>
</ul>

【讨论】：