如何在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

您可以尝试为该项目设置水平滚动。

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

Answer 2

这项工作对我来说：

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