離子複選框使網格空白

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

離子複選框使網格空白

回答

相關問題