The ion flag inside the ionic grid makes the grid empty

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

+4
3

ionicframework

<ion-item> . item-content <ion-grid>

, , item-content ion-grid, :

<ion-grid item-content>

! : http://plnkr.co/edit/gw7h5mW3OJbPxw6xC3vb?p=preview

+3

<ion-checkbox [(ngModel)]="item.selected"></ion-checkbox>

: , ?

<h2>{{ item?.name }}</h2>
<p>{{ item?.artist }}</p>
0

, , , ion-grid, , . , .

If I use the plain html checkbox, it works fine, so I'm just going to do it as well for the style itself.

0
source

Source: https://habr.com/ru/post/1682047/


All Articles