离子网内的角 – 离子 – 复选框使网格空白

前端之家收集整理的这篇文章主要介绍了离子网内的角 – 离子 – 复选框使网格空白前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有以下 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不是问题,当我删除它时它做同样的事情.

解决方法

正如在 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 item-content>

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

猜你在找的Angularjs相关文章