Question

浏览器默认情况下按字母顺序对月份列表进行排序。如何按月份顺序对其进行排序？这是.ts文件中的对象数据：

 objdata:{ '2017': 
   { total: 150000,
     data: 
      { January: 1200,
        February: 1200,
        March: 1300,
        April: 1300,
        May: 1200,
        June: 2000,
        July: 5000,
        August: 4000,
        September: 4500,
        October: 1200,
        November: 9000,
        December: 9000 } },
  '2018': 
   { total: 20000,
     data: 
      { January: 1200,
        February: 1200,
        March: 1300,
        April: 1300,
        May: 1200,
        June: 2000,
        July: 5000,
        August: 4000,
        September: 4500,
        October: 1200,
        November: 9000,
        December: 9000 } }
}

我正在使用* ngFor来显示数据：

 <tr *ngFor="let item of objdata | keyvalue">
      <td scope="row">
        <mat-accordion>
          <mat-expansion-panel>
            <mat-expansion-panel-header>
              <mat-panel-title>
                Year {{item.key}}
              </mat-panel-title>
              <mat-panel-description> 
                  {{item.value['total']}}
              </mat-panel-description>
            </mat-expansion-panel-header>
            <div class="row" *ngFor="let subitem of item.value['data'] | keyvalue">
              <label class="col-sm-3 col-form-label">{{subitem.key | titlecase}}</label>
              <label class="col-sm-9 col-form-label">{{subitem.value}}</label>
            </div>
          </mat-expansion-panel>
        </mat-accordion>
      </td>
    </tr>

我如何像一月，二月，三月......这样排序？

Answer 1

Working Demo

您可以像这样创建管道：

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "sortMonth"
})
export class SortMonthPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    console.log(value);
    var months = [
      "January",
      "February",
      "March",
      "April",
      "May",
      "June",
      "July",
      "August",
      "September",
      "October",
      "November",
      "December"
    ];
    value.sort(function(a, b) {
      return (
        months.indexOf(a.key) -
        months.indexOf(b.key)
      );
    });
    return value;
  }
}

.html

<div class="row" *ngFor="let subitem of item.value['data'] | keyvalue | sortMonth">
     <label class="col-sm-3 col-form-label">{{subitem.key | titlecase}}</label>
     <label class="col-sm-9 col-form-label">{{subitem.value}}</label>
</div>

Answer 2

键值管道接受函数排序作为参数，因此您可以使用

<div class="row" *ngFor="let subitem of item.value['data'] | keyvalue:sort">

其中

sort=(a, b) =>  {  
     return this.months.indexOf(a.key) - this.months.indexOf(b.key) 
};

请参见Adrita stackblitz forked

另一个方法就是在几个月内获取常量

months = ["January", "February",...]

并遍历此数组：

<div class="row" *ngFor="let month of months">
    <label class="col-sm-3 col-form-label">{{month}}</label>
    <label class="col-sm-9 col-form-label">{{item.value.data[month]}}
    </label>
</div>

注意：通常，我们可以使用regExp之类的字符串来获得按顺序排列的“键”

  orderKeys=JSON.stringify(this.myobj)
   .replace(/((:\[(.*?)\])|
             (:{(.*?)})|
             (:\b(\w*)\b)|
             (:\"\b(\w*)\b)|
             {|
             }|\")/g,"").split(',')

如何按角度对从一月到十二月的月份列表进行排序？

2 个答案: