2016-08-16 14 views
2

イオンアイテムの中にイオンラベルを使用していますが、説明が表示されていません(代わりにドットドット.. ..)。 ..何か解決策はありますか?イオンラベルがIonic2の全文を表示していない

<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

答えて

8

UPDATE

またion-card

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

このようなボーナス先端text-wrap属性を設定することができます:あなたは(と text-wrapを置く場合 ion-listに属していない属性の場合は、そのリストのすべてのアイテムに text-wrapというエフェクトが適用されます)。この方法では、すべての項目に text-wrap属性を入れる必要はありません。これは、アプリをわずかに最適化するのに役立ちます。


旧答え:

あなたが説明を表示する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-textarealabelに似ていますが、1行以上の内容が表示されます。最後に、私はvalue属性を使用して、製品の説明で要素の内容を設定します。

あなたのコードについていくつかのコメント:あなたは2つのion-itemの要素を開くが、唯一

<ion-item class="item-text-wrap"> 
     <ion-item> 
     <!-- ... --> 
</ion-item> 
  • そのうちの一つを閉じる代わりの物との結合[innerHTML]属性を使用している

    1. あなただけの補間を使用することができます

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

    ありがとうございました!役に立つ提案。 –

    +0

    嬉しいです。 – sebaferreras

    +1

    '[innerHtml]'は、表示するHTMLコンテンツがある場合に便利です。しかし、製品の可能性は非常に低いです。 – Jagannath

    関連する問題