ionic-framework - 如何使离子项目在离子中可选
问题描述
我在 Ionic 应用程序中工作,我在我的应用程序中使用了 ion-item,我想在移动到下一页之前选择一个项目,但我无法选择该项目。
这是我的shipping.html:
<ion-list *ngFor="let itm of shippingdetails">
<ion-item-divider>
<ion-checkbox slot="end"></ion-checkbox>
<h2>{{itm.name}}</h2>
<p>{{itm.mobile}}</p>
<button ion-button outline item-end>
<ion-icon name="create"></ion-icon>
</button>
<button ion-button outline item-end>
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-divider>
</ion-list>
在此,我展示了循环中的项目。它正在显示数据,但问题是我无法选择该项目。我也使用了该复选框,但是在使用该复选框时,它没有在视图中显示 p 和 h2 标记。
这是 html 中的结果,当使用复选框时,它不显示 p 和 h2 标记。当我不使用复选框时,它显示 p 和 h2 标记。
任何帮助深表感谢。
解决方案
试试这个:它有效!
<ion-list *ngFor="let itm of shippingdetails">
<ion-item-divider>
<ion-checkbox slot="end" [disabled]="isCheckboxDisabled" (ionChange)="selectCP(itm)"></ion-checkbox>
<!-- <ion-radio slot="start"></ion-radio> -->
<!-- <ion-toggle slot="start"></ion-toggle> -->
<ion-label>
<h2>{{itm.name}}</h2>
<p>{{itm.mobile}}</p>
<p>{{itm.state}}, {{itm.city}}</p>
<p>{{itm.address}}</p>
<p>Pincode: {{itm.pincode}}</p>
</ion-label>
<button ion-button outline item-end>
<ion-icon name="create"></ion-icon>
</button>
<button ion-button outline item-end>
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-divider>
</ion-list>
在此,它将显示所有项目和文本的复选框。
推荐阅读
- html - Python Tornado 不会加载 .Css 文件
- javascript - 查询大量数据,减少html表的加载时间| PHP、HTML、SQLSERVER 2012
- python-3.x - AttributeError:模块“rethinkdb”没有属性“连接”
- javascript - 用同位素保存复选框状态
- ios - 从 BLE 数据包中解包字节数组
- c++ - 解释增量运算符
- ubuntu-server - 创建对主目录只有读/写权限的 ubuntu 服务器用户
- signalr - SignalR Core Apache WS 意外响应代码:200
- python-3.x - wxPython TreeCtrl 非常慢,有数百万个节点(在多选树控件上)
- docker - 在 kubernetes pod 中挂载卷时如何更改 umask