javascript - 如何同时使用angular model change和double binding

Question

我在使用 Angular 绑定(bind)模型时遇到了一些问题:

我有两个列表(类(class)和学生)。在学生详细信息页面上，我想:

1. 展示所有可用的类(class)；
2. 将学生已经选修的类(class)切换为“真”。
3. 允许用户添加/删除类(class)。

我做 2 或 3 都没有问题 - 但我不能两者都做。

<ion-list *ngFor="let cls of listOfAllClasses">
  <ion-label>{{cls.name}}</ion-label>
    <ion-toggle [(ngModel)]="cls.checked (ngModelChange)="pushClsToStudent(cls)">
  </ion-toggle>
</ion-list>

Javascript:

pushClsToStudent(cls) {
   cls.checked? this.student.classes.push(cls) : this.student.classes.filter(c => c.classId !== cls.classId)

问题是它使 Angular 发射两个事件 (1. (ngModel) 2. (ngModelChane)。但我不知道如何绕过它。

提前致谢!

Answer 1

首先从 NgModel 指令中删除 ():

<ion-toggle [ngModel]="cls.checked" (ngModelChange)="pushClsToStudent($event, cls)">

这样，ion-toggle 的值将绑定(bind)到 cls.checked 的值，并且 pushClsToStudent(cls) 将被触发当您更改输入的值时。您需要将 event 参数添加到您的 pushClsToStudent() 函数中，以便捕获新值并将其分配给 cls.checked:

pushClsToStudent(event: any, cls: any) {
    this.cls.checked = event;
    ...
}

注意:

您发布的代码中缺少 "，这会给您带来错误:

[(ngModel)]="cls.checked    ||    [(ngModel)]="cls.checked"