ion-label在Ionic2中不顯示整個文本

我在ion-item內使用ion-label，但不顯示描述（相反，它顯示的是點陣.. ..）我希望它顯示整個文本有沒有解決方案？ion-label在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>

來源

2016-08-16 Ankit Maheshwari

UPDATE

您還可以設置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元素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類似於label，但顯示多行內容。最後但並非最不重要的，我使用value屬性來設置元素的內容與產品的描述。

你的代碼的一些意見：

你打開兩個ion-item元素，但只有在關閉其中的一個

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

而不是使用[innerHTML]屬性與產品結合標題，你可以使用插值
```
<ion-card-title primary>{{ product.title }}</ion-card-title> 
```

來源

2016-08-16 07:57:27 sebaferreras

謝謝！有用的建議。 –

很高興我可以幫助:) – sebaferreras

'[innerHtml]'是有用的，如果你有HTML內容顯示。儘管對於product.title不太可能。 – Jagannath

ion-label在Ionic2中不顯示整個文本

回答

相關問題