angular - ionic 网格内的 ionic 复选框使网格空白

Question

我有以下 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>

我的问题是 <ion-checkbox [(ngModel)]="playlist.data[i].selected"></ion-checkbox>线。如果我删除此行，它会在没有复选框的情况下按预期工作。当我添加复选框行时，列表项会针对数组中的每个项目重复，但每个项目的内容都是空白的。

我也试过这样做:<ion-checkbox [(ngModel)]="item.selected"></ion-checkbox>它也做同样的事情。

控制台中没有显示任何错误，我知道属性都是正确的并且已填充。 item.selected属性也已默认为 false。

编辑:为了澄清，当我有复选框时，列表项会重复，但每个项目的内容完全是空的，但只有当复选框行存在时。

JSON 看起来像这样:

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

编辑:filterBy 不是问题，当我删除它时它会做同样的事情。

Answer 1

如 ionicframework forum 中所述

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

所以这个问题真的有一个简单的解决方法，只要加上item-content就可以了给你的ion-grid像上面建议的标签:

<ion-grid item-content>

然后它就像一个魅力! 演示: http://plnkr.co/edit/gw7h5mW3OJbPxw6xC3vb?p=preview