ion-label在Ionic2中未显示全文
安吉·马什瓦里
我在ion-item内使用了ion-label，但是没有显示说明（而是显示点-....）。我希望它显示整个文本。.有什么解决方案吗？
<ion-card *ngFor="let product of products">
<img [src]="product.imageURL" />
<ion-card-content>
<ion-card-title primary [innerHTML]="product.title"></ion-card-title>
<ion-item class="item-text-wrap">
<ion-item>
<ion-label primary>Description</ion-label>
<ion-label [innerHTML]="product.description"></ion-label>
</ion-item>
</ion-card-content>
</ion-card>
塞巴费雷拉斯
更新
您也可以像这样设置text-wrap属性ion-card
<ion-card text-wrap *ngFor="let product of products">
...
</ion-card>
温馨提示：如果将text-wrap（作为属性，而不作为类）放在ion-list中，则该列表中的所有项目都将text-wrap生效。这样，您无需将text-wrap属性放在所有项目中，这将帮助您使应用程序略微优化。
旧答案：
您可以使用ion-textarea（禁用）显示说明。在此处查找有关ion-textarea元素的更多信息。
<ion-card *ngFor="let product of products">
<img [src]="product.imageURL" />
<ion-card-content>
<ion-card-title primary>{{ product.title }}</ion-card-title>
<ion-item>
<ion-label primary>Description</ion-label>
<ion-textarea rows="6" disabled [value]="product.description"></ion-textarea>
</ion-item>
</ion-card-content>
</ion-card>
该rows属性使您可以根据描述文字的长度来设置要显示的行数。通过使用disable属性，ion-textarea类似于label，但显示了多行内容。最后但并非最不重要的一点是，我使用value属性来设置带有产品说明的元素的内容。
关于您的代码的一些注释：
您正在打开两个
ion-item元素，但仅关闭其中一个<ion-item class="item-text-wrap"> <ion-item> <!-- ... --> </ion-item>除了使用
[innerHTML]产品标题使用属性绑定外，您还可以使用插值法<ion-card-title primary>{{ product.title }}</ion-card-title>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
Ionic2在ion-searchbar中选择文本
- 2
在 Ionic 2 中使用 <ion-segment> 时如何显示 <ion-navbar> 的阴影/边框
- 3
<ion-label> 和 <ion-datetime> 之间的离子 <ion-item> 没有出现
- 4
*ngIf in ion-option in ionic 2
- 5
导航后退按钮未在ion-view ionic中显示
- 6
ionic v2 菜单：<ion-nav> 中的内容未呈现
- 7
Ionic - ion-view title not working
- 8
OnsenUI-ion-navicon不显示图标
- 9
OnsenUI-ion-navicon不显示图标
- 10
如何删除ionic 4 ion-searchbar显示？
- 11
如何删除ionic 4 ion-searchbar显示？
- 12
更改ion auth中的默认功能
- 13
获取 Angular 中 ion-rangeslider 的值
- 14
Ionic 2单选按钮（<ion-radio>）仅显示按钮，不显示其他任何按钮
- 15
如何使Ionic中的导航栏（ion-nav-bar）透明？
- 16
ionic：ion-nav-bar中的固定标题
- 17
如何使Ionic中的导航栏（ion-nav-bar）透明？
- 18
在 ion-datetime Ionic 4 中设置默认值
- 19
获取 ionic4 中 ion-select-option 的名称
- 20
Ionic2未处理的承诺拒绝：模板解析错误：'ion-item-content'不是已知元素：错误
- 21
Ionic 4，Angular：使用<ion-datetime>，<ion-select>显示“确定”和“取消”按钮时出现问题
- 22
ion-list 中的 ion-note 会切断主要文本
- 23
当我点击 ion-card 中的 ion-icon 方法时也会触发
- 24
显示模式窗口时，<ion-item>中的href中断
- 25
如何在ion auth中显示IP地址
- 26
我怎么知道<ion-nav-back-button>是否在ionic 1.x中显示？
- 27
使用* ngFor并从ion-label检索html文本
- 28
如何禁用或隐藏Ionic 2 <ion-content>中的滚动条
- 29
菜单图标在ion-navbar Ionic 2中不可见
我来说两句