ion-checkbox inside ion-grid makes grid blank

Question

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 <ion-checkbox [(ngModel)]="playlist.data[i].selected"></ion-checkbox> line. If I remove this line it works as expected without the checkboxes. When I add the checkbox line the list items get repeated for each item in the array but the content of each item comes out blank.

I also tried doing it like this: <ion-checkbox [(ngModel)]="item.selected"></ion-checkbox> which also does the same thing.

No errors are showing in the console and I know the properties are all correct and populated. The item.selected property is defaulted to false already too.

Edit: To clarify, when I have the checkbox there the list items get repeated but the content of each item is completely empty, but only when the checkbox line is there.

The JSON looks something like this:

playlist = {
    data: [
        {
            name: 'foo',
            artist: 'bar',
            selected: false
        },
        ...
    ]
}

Edit: The filterBy is not the issue, it does the same thing when I remove it.

Answer 1

As per said here in the ionicframework forum

Unexpected things inside <ion-item> need to be properly tagged. Add an item-content attribute to each of your <ion-grid> elements

So there is really a simple solution to this problem, just add item-content to your ion-grid tag like suggested above:

<ion-grid item-content>

And then it works like a charm! Demo: http://plnkr.co/edit/gw7h5mW3OJbPxw6xC3vb?p=preview