Question

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

Answer 1

正如 ionicframework forum

中所述

<ion-item>内的意外事件需要正确标记。为每个item-content元素添加<ion-grid>属性

因此，对于此问题确实有一个简单的解决方案，只需将item-content添加到您的ion-grid代码中，如上所示：

<ion-grid item-content>

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

Answer 2

使用迭代器

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

更新：可能存在类型安全错误，在绑定中使用?

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

Answer 3

好的，我发现的是，当我移动ion-grid之外的复选框时，复选框显示但没有其他内容。似乎问题在于离子复选框指令。

如果我使用普通的html复选框，它可以正常工作，所以我就是这样做并自己设计。

Answer 4

我只需要将我的文本包装在离子标签标签中，我的文字就会神奇地出现。：）

示例：

<ion-label><h2>Some text</h2></ion-label>

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

4 个答案: