javascript - 按 ionic 3 中的数据分组列表

Question

我有 table

id   customer_name  country  pincode

1    Jhon             Mexico  12209 

2    Ryan             Mexico  12209 

3    Max              Sweden  12209 

4    Steve            Germany  12209 

我想要这样的输出:

Mexico  
        Jhon, Ryan

Sweden 
         Max

Germany 

         Steve

首页.ts

show(){
    db.executeSql('SELECT *  from  tbl_data where coutry=?',[data.rows.item(i).country])

            .then((data) => {
              if (data.rows.length > 0) {
                alert(data.rows.length);
                for (let j = 0; j < data.rows.length; j++) {
                  this.userdata.push({
                  country:data.rows.item(j).country,
                   customername:data.rows.item(j).customername,
                 })
                 }}}

我如何在 ionic v3 中按这样的数据分组

如何使用 Ionic v3 实现这一目标？有什么想法吗？

Answer 1

据我了解，您正在尝试按国家/地区对其进行分组，以便您可以在 TS 中实现以下内容，

var country = new Set(this.displayItems.map(item => item.country)); 
this.result = [];
country.forEach(getCountry => 
  this.result.push({
    country_name: getCountry, 
    values: this.displayItems.filter(i => i.country === getCountry)
  }
  ))

这里的 this.displayItems 是您的服务数据。

HTML 模板可以是这样的，

<ion-grid>
  <ion-row>
    <ion-col>
      Country
    </ion-col>
    <ion-col>
      Customer Name
    </ion-col>
  </ion-row>
  <hr>

  <ion-row *ngFor="let item of result">
    <ion-col>
      {{ item.country_name }}
    </ion-col>
    <ion-col>
      <span *ngFor="let value of item.values">
        {{ value.customer_name }} ,
      </span>
    </ion-col>
  </ion-row>

</ion-grid>

你可以在这里以 Ionic 方式看到你的预期输出，https://stackblitz.com/edit/ionic-25rq2n ..