如何将数据放在离子5中的项目分隔符中

Question

我正在尝试将我从 API 调用的数据放置到由 ion-item-divider 组成的列表中并在实际内容下方，我想对该数据进行排序并根据 ion-item-divider 放入列表中.以下是我的参考代码。

store.pages.ts

    getAllStores(){
        this.dataservice.getAllStores().subscribe(res=>{
          this.data = res;
          console.log(this.data);
    
        })
      }

store.page.html

    <ion-content>
      <ion-grid>
        <ion-row *ngFor="let obj of dataArray">
          <ion-col size="2">
            <ion-item-divider color="primary" (click)="filterPopover()">
              <ion-label class="ion-text-center">
                {{obj}}
              </ion-label>
            </ion-item-divider>
          </ion-col>
          <ion-col size="10">
            <ion-list *ngFor="let store of data">
              <ion-item button>
                <img src="../assets/brand/1mg.png" alt="" width="60px" height="60px">
                <ion-label>
                  <div class="list-container">
                    <h1>{{store.title}}</h1>
                    <p>
                      <ion-icon name="gift"></ion-icon> Rs {{store.cback}} cashback
                    </p>
                  </div>
                </ion-label>
              </ion-item>
            </ion-list>
          </ion-col>
        </ion-row>
        </ion-grid>
    </ion-content>

Answer 1

您可以使用.sort() 函数对数组进行排序。

html:

<ion-grid>
        <ion-row *ngFor="let obj of dataArray">
          <ion-col size="2">
            <ion-item-divider color="primary" (click)="filterPopover()">
              <ion-label class="ion-text-center">
                {{obj.title}}
              </ion-label>
            </ion-item-divider>
          </ion-col>
          <ion-col size="10">
            <ion-list *ngFor="let store of dataArray">
              <ion-item button>
                <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" alt="" width="60px" height="60px">
                <ion-label>
                  <div class="list-container">
                    <h1>{{store.title}}</h1>
                    <p>
                      <ion-icon name="gift"></ion-icon> Rs {{store.cback}} cashback
                    </p>
                  </div>
                </ion-label>
              </ion-item>
            </ion-list>
          </ion-col>
        </ion-row>
      </ion-grid>

.ts

this.yourDataFromApi = [
      {title:"abc", cback:2},
      {title:"oiuts", cback:2},
      {title:"sdcsd", cback:2},
      {title:"iyert", cback:2},
      {title:"ueruy", cback:2},
      {title:"nbvc", cback:2}
    ];
    this.dataArray = this.yourDataFromApi.sort((a, b) => a.title.localeCompare(b.title));