web-dev-qa-db-ja.com

ion-labelがIonic2で全文を表示していない

Ion-item内でion-labelを使用していますが、説明が表示されません（代わりにdot-dot .. ..を表示します）テキスト全体を表示したい..解決策はありますか？

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

enter image description here

angulartypescriptionic-frameworkionic2ionic3
7
Ankit Maheshwari

[〜＃〜]更新[〜＃〜]

このように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. 2つのion-item要素を開いていますが、そのうちの1つだけを閉じています

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

  2. 商品タイトルで[innerHTML]属性バインディングを使用する代わりに、補間を使用できます

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

私にとってIONIC 3.xの目標は、フラグをプライマリにすることでした。

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