I have the following HTML:
<ion-item-sliding *ngFor="let item of playlist.data | filterBy: filter; let i = index;">
<ion-item class="playlist-modal-item">
<ion-grid>
<ion-row>
<ion-col col-4>
<h2>{{ item.name }}</h2>
<p>{{ item.artist }}</p>
</ion-col>
<ion-col col-4>
</ion-col>
<ion-col col-4>
<ion-checkbox [(ngModel)]="playlist.data[i].selected"></ion-checkbox>
</ion-col>
</ion-row>
</ion-grid>
</ion-item>
<ion-item-options side="right">
<button ion-button>Play Next</button>
</ion-item-options>
<ion-item-options side="left">
<button ion-button>Play Last</button>
</ion-item-options>
</ion-item-sliding>
My problem is with the line <ion-checkbox [(ngModel)]="playlist.data[i].selected"></ion-checkbox>. If I delete this line, it will work, as expected, without flags. When I add a check box, the list items are repeated for each element of the array, but the contents of each element come out empty.
I also tried to do it like this: <ion-checkbox [(ngModel)]="item.selected"></ion-checkbox>which also does the same.
Errors are not displayed in the console, and I know that all the properties are correct and filled. The item.selecteddefault property is also set to false.
Edit: To clarify when I have a check box, the list items are repeated, but the contents of each item are completely empty, but only when there is a check box.
JSON looks something like this:
playlist = {
data: [
{
name: 'foo',
artist: 'bar'
selected: false
},
...
]
}
: FilterBy , , .