Hello, I’m having problems with ion-checkbox checked. I’ve tried a lot of options to make it work, but can’t figure it out.
My problem is that when the user has the app open at scroll position y = 0, the checkboxes work. When you tap a checkbox it will uncheck or check depending on the current value. But when the user scrolls a few pixels down, the uncheck/check doesn’t update anymore. If you tap the checkbox from unchecked to checked, it stays the same. But when you scroll, or tap somewhere else in the page, it rerenders to the correct value.
My code for rendering the checkboxes:
<ion-list>
<ion-item lines="none" *ngFor="let propertyType of propertyTypes;">
<ion-checkbox mode="ios" slot="start" [value]="propertyType.key"
[checked]="propertyType.key|houseTypeChecked:checkedPropertyTypes"
(ionChange)="toggleHouseType($event.detail)"></ion-checkbox>
<ion-label>{{ propertyType.value }}</ion-label>
</ion-item>
</ion-list>
My code for toggling the value:
toggleHouseType(type) {
let houseTypes = this.checkedPropertyTypes;
if (type.checked && !houseTypes.includes(type.value)) {
houseTypes = [ ...houseTypes, type.value];
} else if (!type.checked && houseTypes.includes(type.value)) {
houseTypes = houseTypes.filter((houseType) => houseType !== type.value);
}
this.checkedPropertyTypes = houseTypes;
this.houseForm.get('preferredPropertyTypes').setValue(this.checkedPropertyTypes);
}
Tried a pure pire for checked value
@Pipe({
name: 'houseTypeChecked',
pure: true
})
export class HouseTypeCheckedPipe implements PipeTransform {
transform(type: string, types: string[]): any {
return types.includes(type);
}
}
I’ve also created a video where you can see the problem:
Versions:
"@angular/animations": "^8.2.0",
"@angular/cdk": "^8.1.2",
"@angular/common": "~8.1.2",
"@angular/compiler": "~8.1.2",
"@angular/core": "~8.1.2",
"@angular/forms": "~8.1.2",
"@angular/material": "^8.1.2",
"@angular/platform-browser": "~8.1.2",
"@angular/platform-browser-dynamic": "~8.1.2",
"@angular/router": "~8.1.2",
"@ionic-native/app-version": "^5.11.0",
"@ionic-native/badge": "^5.14.0",
"@ionic-native/core": "^5.11.0",
"@ionic-native/deeplinks": "^5.12.0",
"@ionic-native/image-picker": "^5.14.0",
"@ionic-native/onesignal": "^5.14.0",
"@ionic-native/splash-screen": "^5.11.0",
"@ionic-native/status-bar": "^5.11.0",
"@ionic/angular": "^4.7.1",
"@ionic/storage": "^2.2.0",