如何按角度对 1 月到 12 月的月份列表进行排序？答案

【问题标题】：How to sort the month list from January to December in angular?如何按角度对 1 月到 12 月的月份列表进行排序？
【发布时间】：2020-03-06 19:55:18
【问题描述】：

浏览器默认按字母顺序对月份列表进行排序。如何按月份顺序对其进行排序？这是 .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>

我怎样才能像一月，二月，三月......等等这样排序？

【问题讨论】：

keyvalue 过滤器在*ngFor 中是什么。你也可以分享键值代码吗？
'keyValue'管道用于当我们有对象的对象形式的数据时。
@anjuboura 不要使用管道，在加载到模板之前尝试在 .ts 文件中过滤它，也可以使用以下文章对数组进行排序：stackoverflow.com/questions/37349331/…

标签： javascript angular sorting angular-material angular7

【解决方案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>

【讨论】：

键值管道允许作为函数排序的参数，所以你可以使用<div class="row" *ngFor="let subitem of item.value['data'] | keyvalue:sort"> where sort=(a, b) => { return this.months.indexOf(a.key) - this.months.indexOf(b.key) };，见stackblitz.com/edit/…

【解决方案2】：

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

<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(',')

【讨论】：