10

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

在此处输入图像描述

4

2 回答 2

25

更新

您也可以像这样设置text-wrap属性ion-card

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

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

老答案：

您可以使用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>

该rows属性允许您根据描述文本的长度来设置要显示的行数。通过使用该disable属性，ion-textarea类似于 a 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>
于 2016-08-16T07:57:27.897 回答
0

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

<ion-label primary>collection response: {{ this.response }} </ion-label>
于 2019-02-22T08:17:39.417 回答