我在使用 Angular 绑定(bind)模型时遇到一些问题:
我有两个列表(类(class)和学生)。在学生详细信息页面上，我想要:
- 展示所有可用的类(class)；
- 将学生已修读的类(class)切换为“true”。
- 允许用户添加/删除类。
我做 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 Fire 产生两个事件(1.(ngModel)2.(ngModelChane)。但我不知道如何绕过它。
提前非常感谢您!
最佳答案
首先从 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"
关于javascript - 如何同时使用 Angular 模型更改和双重绑定(bind)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41213060/