I have a model that basically is a list of objects, and each of this objects contains a boolean value. These boolean values must be updatable by the user so I wrote a component that creates a checkbox for each object and then I bind this checkbox with the model behind it.
This however is not working! If I check a checkbox, the model it is bound to seems to not be updated at all.
To illustrate my problem, I created a minimal working example:
import {Component, Input, OnInit} from '@angular/core';
@Component({
selector: 'component-test',
template: `
<div *ngIf="!!data">
<div *ngFor="let item of data">
<ion-checkbox ([ngModel])="item.checked"></ion-checkbox>
</div>
</div>
<ion-button (click)="console_log()">print output</ion-button>
`
})
export class TestComponent {
@Input() data: any;
console_log() {
console.log(this.data);
}
}
@Component({
selector: 'page-test',
template: `
<ion-header>
<ion-toolbar color="primary">
<ion-title>
Test
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<component-test [data]="params.data | async"></component-test>
</ion-content>
`
})
export class TestPage implements OnInit {
params: any = {};
async get_data() {
return [{checked: false}, {checked: false}, {checked: false}];
}
ngOnInit() {
this.params['data'] = this.get_data();
}
}
As you can see:
- the data is asynchronously loaded in a parent component (page-test)
- the data is passed to a testcomponent (which contains the checkboxes) (component-test)
- I added a button that outputs the data in the console to verify the current state of the model.
The expected behaviour:
- when I toggle a checkbox, the boolean in the model should mirror the state of the checkbox and vice versa
The observed behaviour:
- When I toggle a checkbox and output the model to the console, I observe no change at all.
Aucun commentaire:
Enregistrer un commentaire