Angular 离子4:选中离子复选框不从离子更改更新
这就是我如何创建一个带有复选框的列表来选中/取消选中员工。我正在将员工的checked属性绑定到复选框Angular 离子4:选中离子复选框不从离子更改更新,angular,ionic-framework,checkbox,ionic4,2-way-object-databinding,Angular,Ionic Framework,Checkbox,Ionic4,2 Way Object Databinding,这就是我如何创建一个带有复选框的列表来选中/取消选中员工。我正在将员工的checked属性绑定到复选框 <ion-list> <ion-item *ngFor="let employee of employees; let i = index"> <ion-label>{{employee.name}}</ion-label> <ion-checkbox value="
<ion-list>
<ion-item *ngFor="let employee of employees; let i = index">
<ion-label>{{employee.name}}</ion-label>
<ion-checkbox value="{{employee.id}}"
[(ngModel)]="employee.isChecked"
(ionChange)="emplsChange($event.detail.checked, i)"></ion-checkbox>
</ion-item>
</ion-list>
现在,问题是,如果条件为true,并且我将isChecked设置为false,那么它会正常工作,并且复选框不会被选中。但这只是第一次。如果我再次检查同一名员工,isChecked设置为false,但在UI上它被选中
我试图通过使用(ngModelChange)而不是(ionChange)来解决这个问题,但它没有起到任何作用
因此,主要的问题是,当我在组件的onchange方法中设置ion复选框模型时,UI没有正确更新。你们中有谁能看到另一个问题吗?有人也有过同样的经历吗?Som3One plZ能帮上忙吗!1.十一,
Thx
我正在使用
离子型:
爱奥尼亚CLI:5.2.1
离子骨架:@Ionic/angular 4.7.0-dev.201907122213.5db409f
@角度开发套件/构建角度:0.801.1
@角度devkit/示意图:8.1.1
@角度/cli:8.1.1
@离子/角度工具包:2.0.0
更新:
我通过使用深度副本解决了这个问题,而不是在ionchange方法中处理employees数组的引用。新版本如下所示:
emplsChange(detail: boolean, index: number) {
const newEmployees: IEmployee[] = this.copy(this.employees);
const checkedEmpls = newEmployees.filter(e => e.isChecked).length;
const needdedEmpls = this.day.event.scheduledTask.scheduledTaskDays[this.indexOfDay].neededEmployees;
if (detail !== newEmployees[index].isChecked) {
newEmployees[index].isChecked = detail && checkedEmpls === needdedEmpls ? !detail : detail;
this.employees = newEmployees;
}
}
尝试这样做:-
<ion-checkbox value="{{employee.id}}" [(ngModel)]="employee.isChecked" (ionChange)="emplsChange($event.checked, i)">
copy(o) {
let output, v, key;
output = Array.isArray(o) ? [] : {};
for (key in o) {
v = o[key];
output[key] = (typeof v === 'object') ? this.copy(v) : v;
}
return output;
}
<ion-checkbox value="{{employee.id}}" [(ngModel)]="employee.isChecked" (ionChange)="emplsChange($event.checked, i)">