angular - ionic 4 : Ion-checkbox checked not updating from ionchange

Question

我就是这样创建一个带有复选框的列表来选中/取消选中员工的。我将员工的选中属性绑定(bind)到复选框。

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

但是，当checkbox被改变的时候，我想检查它是否可以被选中或者必须是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;
    }

现在，问题是，如果条件为真并且我将 isChecked 设置为假，它可以正常工作并且不会选中复选框。但仅限于第一次。如果我再次检查同一名员工，isChecked 将设置为 false，但在 UI 上它会被选中。

我试图通过使用 (ngModelChange) 而不是 (ionChange) 来解决这个问题，但它没有任何作用。

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

谢谢

我正在使用 ionic :

ionic 命令行界面:5.2.1 ionic 框架:@ionic/angular 4.7.0-dev.201907122213.5db409f@angular-devkit/build-angular:0.801.1@angular-devkit/原理图:8.1.1@ Angular/cli:8.1.1@ionic/Angular 工具包: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;
        }
}

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