角度 – 离子标签不会在Ionic2中显示整个文本

发布时间：2020-12-17 10:26:21 所属栏目：安全来源：网络整理

导读：我在离子项目中使用离子标签,但描述没有显示(而是显示点点.. ..)我希望它显示整个文本..有什么解决方案吗？ ion-card *ngFor="let product of products" img [src]="product.imageURL" / ion-card-content ion-card-title primary [innerHTML]="product.titl

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

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

UPDATE

您也可以像这样在离子卡中设置text-wrap属性

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

额外提示：如果将文本换行(作为属性,而不是类)放在离子列表中,则该列表中的所有项都将应用文本换行效果.这样您就不需要将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类似于标签,但显示多行内容.最后但并非最不重要的是,我使用value属性来设置元素的内容和产品的描述.

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

>你打开两个离子项元素,但只关闭其中一个

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

>不使用[innerHTML]属性绑定产品标题,您可以使用插值

<ion-card-title primary>{{ product.title }}</ion-card-title>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!