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

Question

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

Answer 1

更新

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

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

额外提示：如果将 text-wrap（作为属性，而不是 class）放在 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>
```

Answer 2

对我来说，IONIC 3.x 的目标是将标志设为主要：

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

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

ion-label is not displaying whole text in Ionic2

typescript

ionic-framework

ionic2

ionic3

angular