如何同时使用角度模型更改和双重绑定

偶像

我在角度绑定模型上遇到了一些麻烦:

我有两个清单(班级和学生)。在学生详细信息页面上,我要:

  1. 展示所有可用的课程;
  2. 将学生已经参加的课程切换为“ true”。
  3. 允许用户添加/删除类。

我没问题做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)

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

提前非常感谢您!

斯蒂芬·斯沃科塔(Stefan Svrkota)

首先()NgModel指令中删除

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

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

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

笔记:

您缺少"发布的代码,这会为您造成错误:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

角度2:如何使用getter和setter方法将Input绑定到模型属性?

如何使用角度ui $ modal.popup()绑定范围/模型

如何绑定和更改角度的动态分量输入?

如何在角度5绑定中同时获取内容的值和名称?

svg 同时使用 vite 和 webpack 进行双重构建

如何使用角度异步绑定

当绑定模型与选择选项的类型不同时,应如何使用选择控件为模型设置值?

两个服务角度的双重绑定

如何使用“和” /“非”逻辑更改MAMP中的键绑定?

如何在 vue.js 中同时使用 v-for 和 source 绑定?

如何以角度同时使用国内和国际电话号码的验证器

角度双向数据绑定和监视父组件中的更改

如何同时显示和更改html内容

如何同时更改href和innertext?

如何同时更改CSS和HTML文件

如何同时使用角度1.3.4和角度2

如何在Django的POST和GET中同时使用模型属性

如何使用ngFor绑定角度形式验证

Json模型不绑定角度

如何使用GROUP BY查询中模型绑定

如何在Android数据绑定,房间和改造中使用模型/ POJO?

如何使用ReactiveUI和DynamicData将可变模型的ObservableCollection <T>绑定到viewmodel的ReadOnlyObservableCollection <T>

如何在Vuetify组件中使用Vue v模型绑定以及计算的属性和Vuex?

如何更改wcf端口名称和绑定?

如何同时引用和绑定一个属性?

如何在Vue中同时绑定和发射数据?

如何让 WPF 数据绑定注意到模型属性的更改?

使用指令动态更改Angular JS中的模型绑定?

角度2。我可以同时使用ViewChild和@Input吗?