Как отсортировать список месяцев с января по декабрь в угловых?

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

Рабочая демонстрация

Вы можете создать трубу следующим образом:

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 разветвленный

Еще один подход - просто войти в число месяцев

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