离子网内的角 – 离子 – 复选框使网格空白
我有以下
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所说的那样
所以这个问题确实有一个简单的解决方案,只需将item-content添加到离子网格标签中,如上所示: <ion-grid item-content> 然后它就像一个魅力!演示:http://plnkr.co/edit/gw7h5mW3OJbPxw6xC3vb?p=preview (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |