如何在IONIC 2的離子項目中放置多個徽章？

Question

如何在IONIC 2的離子項目中放置多個徽章？我正在這樣做，但它只顯示前四個徽章。

<ion-item detail-push>    
    <ion-badge>Badge 1</ion-badge> 
    <ion-badge>Badge 2</ion-badge> 
    <ion-badge>Another Badge</ion-badge> 
    <ion-badge>Another big badge</ion-badge> 
    <ion-badge>Another very big badge</ion-badge> 
</ion-item> 

我需要的離子項目成長爲顯示所有徽章。我該怎麼做？

呈現的HTML是這樣的：

<ion-item class="item item-block item-md" detail-push=""> 
    <div class="item-inner"> 
    <div class="input-wrapper"> 
     <!--template bindings={}--> 
     <ion-label class="label label-md">    
     <ion-badge class="badge badge-md">Badge 1</ion-badge> 
     <ion-badge class="badge badge-md">Badge 2</ion-badge> 
     <ion-badge class="badge badge-md">Another Badge</ion-badge> 
     <ion-badge class="badge badge-md">Another big badge</ion-badge> 
     <ion-badge class="badge badge-md">Another very big badge</ion-badge> 
     </ion-label> 
    </div> 
    <!--template bindings={}--> 
    </div> 
    <div class="button-effect"></div> 
</ion-item> 

它看起來是這樣的：

Answer 1

這項工作對我來說：

<button ion-item detail-push> 
    <div style="float:left; width:100%; display:block; margin-left:-10px;"> 
     <button ion-button style="float:left; font-size:1.2rem !important; color:#999; float:left; display:block; text-transform: capitalize;" clear> 
      Tags 
     </button> 
    </div> 
    <ion-badge>Badge 1</ion-badge> 
    <ion-badge>Badge 2</ion-badge> 
    <ion-badge>Another Badge</ion-badge> 
    <ion-badge>Another big badge</ion-badge> 
    <ion-badge>Another very big badge</ion-badge> 
</button> 

Answer 2

你可以嘗試設置水平滾動的項目。

<ion-item detail-push> 
<ion-scroll scrollX="true">    
    <ion-badge>Badge 1</ion-badge> 
    <ion-badge>Badge 2</ion-badge> 
    <ion-badge>Another Badge</ion-badge> 
    <ion-badge>Another big badge</ion-badge> 
    <ion-badge>Another very big badge</ion-badge> 
</ion-scroll> 
</ion-item>