Question

这是我创建带有复选框以选中/取消选中员工的列表的方式。我将员工的选中属性绑定到复选框。

<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>

但是，当复选框更改时，我想检查是否可以选中或必须为false。为此，我在检查条件后将所选员工的isChecked属性设置为false。

    emplsChange(detail: boolean, index: number) {
        const newEmployees: IEmployee[] = this.employees;
        this.employees = [];
        // get all checked employees
        const checkedEmpls = newEmployees.filter(e => e.isChecked).length;

        newEmployees[index].isChecked = detail && checkedEmpls === this.needdedEmpls ? false : detail;

        this.employees = newEmployees;
    }

现在，问题是，如果条件为true，并且我将isChecked设置为false，则它可以正常工作，并且未选中该复选框。但是只有在第一次。如果我再次检查同一位员工，则isChecked设置为false，但是在UI上将其选中。

我试图通过使用（ngModelChange）而不是（ionChange）来解决此问题，但是它什么也没做。

所以主要问题是，当我在组件的onchange方法中设置ion-checkbox-Model时，UI没有正确更新。你们其中一个可以看到另一个问题吗？有人经历过吗？ CaN Som3One plZ HeLp！1 !!! 11

Thx

我正在使用离子性：

离子CLI：5.2.1 离子框架：@ ionic / angular 4.7.0-dev.201907122213.5db409f @ angular-devkit / build-angular：0.801.1 @ angular-devkit / schematics：8.1.1 @ angular / cli：8.1.1 @ ionic / angular-toolkit：2.0.0

更新：我通过使用深层副本而不是处理ionchange方法中的employee数组的引用来解决它。像这样的新lokk：

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;
        }
}

    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;
    }

Answer 1

尝试以下操作：-

<ion-checkbox  value="{{employee.id}}" [(ngModel)]="employee.isChecked" (ionChange)="emplsChange($event.checked, i)">

离子4：离子复选框已选中，无法从ionchange更新

1 个答案: