离子复选框使网格空白

我有以下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不是问题，它同样的事情时，我将其删除。

来源

2017-07-22 chrispytoes

尝试添加名称属性复选框，应该是。 – Sergey

详细说明你的问题 – Aravind

@Aravind编辑 – chrispytoes

按照这里说里面<ion-item>的ionicframework forum

意外的事情需要适当的标记。一个item-content属性添加到您的每个<ion-grid>元素

的那么真的是有一个简单的解决这个问题，只需添加item-content您ion-grid标签像上面建议：

<ion-grid item-content>

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

来源

2017-07-23 08:12:59 Alex

谢谢!!!我知道我没有疯狂，文档应该使这更加明显。 – chrispytoes

没问题，很高兴我可以帮忙！我不是离子型自己的活跃用户，但我注意到当你结合不同的东西，比如在这种情况下的网格和项目，奇怪的东西往往会发生，就像在这里，一切都变得空白。这是真正的侦探工作，试图找出为什么以及如何解决它：D很高兴我们给你一个解决方案。周末愉快，编程愉快！ :) – Alex

使用迭代器

<ion-checkbox [(ngModel)]="item.selected"></ion-checkbox>

更新：有可能是一个类型安全的错误，在绑定

<h2>{{ item?.name }}</h2> 
<p>{{ item?.artist }}</p>

来源

2017-07-22 19:20:37 Aravind

OP已经提到他试过这个.. –

好使用?，所以我所发现的是，当我移动复选框ion-grid以外的复选框显示，但没有别的。似乎问题在于离子复选框指令。

如果我使用一个普通的html复选框，它可以正常工作，所以我只是要做到这一点，并自己设计风格。

来源

2017-07-22 23:38:43 chrispytoes

离子复选框使网格空白

回答

相关问题