typescript 离子标签未在 Ionic2 中显示整个文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38968365/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ion-label is not displaying whole text in Ionic2
提问by Ankit Maheshwari
I'm using ion-label inside ion-item, but the description is not displaying (instead it shows dot-dot.. ..) I want it to display whole text.. Is there any solution?
我在 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>
回答by sebaferreras
UPDATE
更新
You can also set the text-wrapattribute in the ion-cardlike this
您还可以像这样设置text-wrap属性ion-card
<ion-card text-wrap *ngFor="let product of products">
...
</ion-card>
Bonus tip: If you put text-wrap(as an attribute, not as a class) in an ion-list, all items in that list will have the text-wrapeffect applied. This way you don't need to put the text-wrapattribute in all items and this will help you making your app slightly optimized.
额外提示：如果您将text-wrap（作为属性，而不是作为类）放入 an ion-list，则该列表中的所有项目都将text-wrap应用效果。这样你就不需要把text-wrap属性放在所有的项目中，这将帮助你稍微优化你的应用程序。
Old answer:
旧答案：
You can use a ion-textarea(disabled) to show the description. Find more information about the ion-textarea element here.
您可以使用ion-textarea(disabled) 来显示说明。在此处查找有关 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>
The rowsattribute allows you to set how many rows do you want to show, according to how long the text of the description is. By using the disableattribute, the ion-textareais similar to a label, but showing more than one line of content. And last but not least, I use the valueattribute to set the content of the element with the product's description.
该rows属性允许您根据描述文本的长度来设置要显示的行数。通过使用该disable属性， theion-textarea类似于 a label，但显示不止一行内容。最后但并非最不重要的一点是，我使用该value属性来设置具有产品描述的元素内容。
A few comments about your code:
关于您的代码的一些评论：
You're opening two
ion-itemelements, but closing only one of them<ion-item class="item-text-wrap"> <ion-item> <!-- ... --> </ion-item>Instead of using the
[innerHTML]attribute binding with the product title, you can just use interpolation<ion-card-title primary>{{ product.title }}</ion-card-title>
您正在打开两个
ion-item元素，但只关闭其中一个<ion-item class="item-text-wrap"> <ion-item> <!-- ... --> </ion-item>[innerHTML]您可以只使用插值，而不是使用与产品标题的属性绑定<ion-card-title primary>{{ product.title }}</ion-card-title>
回答by Alessandro Ornano
For me the goal with IONIC 3.xwas to put the flag primary:
对我来说，IONIC 3.x的目标是将标志置于主要位置：
<ion-label primary>collection response: {{ this.response }} </ion-label>
