我有以下
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 anitem-content
attribute to each of your<ion-grid>
elements
所以这个问题确实有一个简单的解决方案,只需将item-content添加到离子网格标签中,如上所示:
<ion-grid item-content>
然后它就像一个魅力!演示:http://plnkr.co/edit/gw7h5mW3OJbPxw6xC3vb?p=preview