ion-label не отображает весь текст в Ionic2

Я использую ion-label внутри ion-item, но описание не отображается (вместо этого отображаются точки-точки.. ..) Я хочу, чтобы он отображал весь текст.. Есть какое-нибудь решение?

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

введите описание изображения здесь


typescript ionic-framework angular ionic3 ionic2
person Ankit Maheshwari    schedule 16.08.2016    source источник

Ответы (2)


arrow_upward
25
arrow_downward

ОБНОВЛЕНИЕ

Вы также можете установить атрибут 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 можно найти здесь.

<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>
person sebaferreras    schedule 16.08.2016
comment
Спасибо! Полезные предложения. - person Ankit Maheshwari; 16.08.2016
comment
Рад, что смог помочь :) - person sebaferreras; 16.08.2016
comment
[innerHtml] полезно, если у вас есть HTML-контент для отображения. Однако очень маловероятно для product.title. - person Jagannath; 17.08.2016

arrow_upward
0
arrow_downward

Для меня целью с IONIC 3.x было установить основной флаг:

<ion-label primary>collection response: {{ this.response }} </ion-label>
person Alessandro Ornano    schedule 22.02.2019