离子标签未在 Ionic2 中显示整个文本答案

【问题标题】：ion-label is not displaying whole text in Ionic2离子标签未在 Ionic2 中显示整个文本
【发布时间】：2016-12-22 10:37:49
【问题描述】：

我在 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>

【问题讨论】：

标签： angular typescript ionic-framework ionic2 ionic3

【解决方案1】：

更新

你也可以像这样在ion-card中设置text-wrap属性

<ion-card text-wrap *ngFor="let product of products">
...
</ion-card>

额外提示：如果您将text-wrap（作为属性，而不是作为类）放在ion-list 中，则该列表中的所有项目都将应用text-wrap 效果。这样您就不需要将text-wrap 属性放在所有项目中，这将帮助您稍微优化您的应用程序。

旧答案：

您可以使用ion-textarea（已禁用）来显示说明。查找有关 ion-textarea 元素 here 的更多信息。

<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>
```

【讨论】：

谢谢！有用的建议。
很高兴我能帮上忙 :)
[innerHtml] 如果您有要显示的 html 内容很有用。不过 product.title 不太可能。

【解决方案2】：

对我来说，IONIC 3.x 的目标是将标志放在主要位置：

<ion-label primary>collection response: {{ this.response }} </ion-label>

【讨论】：