ion-label不会在Ionic2中显示整个文本

Question

我在离子项目中使用离子标签，但描述没有显示（而是显示点点.. ..）我希望它显示整个文本..有什么解决方案吗？

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

Answer 1

UPDATE

您也可以像这样在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元素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属性来设置元素的内容和产品的描述。

关于您的代码的一些评论：

1. 你打开两个ion-item元素，但只关闭其中一个

   <ion-item class="item-text-wrap">
           <ion-item>
           <!-- ... -->
   </ion-item>

2. 您可以使用插值，而不是使用[innerHTML]属性绑定产品标题 <ion-card-title primary>{{ product.title }}</ion-card-title>

Answer 2

对我而言，IONIC 3.x的目标是将旗帜放在主要位置：

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