ion-checkbox inside ion-grid makes grid blank

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.