如何在离子列表中分组？

Question

如何在ion list中按数据分组显示?

<ion-list *ngFor="let obj of data; let i=index">
  <ion-item-sliding>
      <ion-item>
        <div>UT_TXN_CODE: {{obj.UT_TXN_CODE}}</div>
        <br>Date {{obj.UT_LOG_DATE}}
        <br>Subject : {{obj.UT_SUBJECT}}
        <br>UT_LINK: {{obj.UT_LINK}}
      </ion-item>
      <ion-item-options side="right">
        <button ion-button color="secondary">
          <ion-icon name="checkmark"></ion-icon>
          Approve
        </button>
        <button ion-button color="blue">
          <ion-icon name="checkmark"></ion-icon>
          Send For<br> Approval
        </button>
      </ion-item-options>
  </ion-item-sliding>
</ion-list>

我想按此 UT_TXN_CODE 分组。它必须显示 UT_TXN_CODE 作为组长。

Answer 1

试试这个代码

<ion-list *ngFor="let obj of data; let i=index">
    <ion-list-header>
     {{obj.UT_TXN_CODE}}
    </ion-list-header>
    <ion-item-sliding>
      <ion-item>
            <div>UT_TXN_CODE: {{obj.UT_TXN_CODE}}</div>
            <br>Date {{obj.UT_LOG_DATE}}
            <br>Subject : {{obj.UT_SUBJECT}}
            <br>UT_LINK: {{obj.UT_LINK}}
      </ion-item>
      <ion-item-options side="right">
            <button ion-button color="secondary">
              <ion-icon name="checkmark"></ion-icon>
              Approve
            </button>
            <button ion-button color="blue">
              <ion-icon name="checkmark"></ion-icon>
              Send For<br> Approval
            </button>
      </ion-item-options>
   </ion-item-sliding>
</ion-list>

如何在离子列表中分组？

How to group by in ion list?

html

ionic-framework

angular2-template

ionic3