Angular 7 Порядок выражения пары ключей

Question

Я пытаюсь создать таблицу с Angular 7, в которой таблица является родительским компонентом с дочерними компонентами каждой строки, за исключением первой строки.Я передаю значение канала значения ключа в каждую строку, и перед отображением дочерних компонентов я также сначала перебираю пару значений ключа в родительском компоненте (см. Изображение).Я использую ngFor для обхода пары ключ-значение, но я борюсь с порядком, который он отображает в дочерних компонентах.Я знаю, что по умолчанию значение ключа возвращается в алфавитном порядке на основе ключа.Мне удалось установить значение null на родительском компоненте ngFor для его выражения, и оно работает нормально, но я получаю ошибку в дочерних компонентах, когда пытаюсь использовать нуль для выражения.Вот что я получил:

table.component.ts

Это класс экспорта.

intervals: {[key: string]: string} = {
    'past-hour': 'Past Hour',
    'today': 'Today',
    'yesterday': 'Yesterday'
  };

// This is the one that I'm having trouble with.
responseStatus: {[key: string]: string} = {
    'success': 'Success',
    'error': 'Error %',
    'throttle': 'Throttle %'
};

table.component.html

<table class="compare-table text-right">
  <tbody>
    <tr>
      <td></td>
      <!-- The null works here -->
      <td *ngFor="let status of responseStatus | keyvalue: null">
        {{ status.value }}
      </td>
    </tr>
    <tr 
      table-row 
      *ngFor="let interval of intervals | keyvalue: null" 
      [interval]="interval" 
      [responseStatuses]="responseStatus">
    </tr>
  </tbody>
</table>

table-row.component.ts

export class TableRowComponent implements OnInit {
  @Input() interval; 
  @Input() responseStatuses: {[key: string]: string};

  constructor() { }

  ngOnInit() {
  }

}

table-row.component.html Thisошибки на переднем конце (компилируется нормально).Если я удаляю ноль, он отображается, но в алфавитном порядке по ключу.Таким образом, вместо успеха, ошибки и газа, как в первом ряду, он отображает ошибку, успех, газ.

<td>
  {{ interval.value}}
</td>
<td *ngFor="let response of responseStatuses | keyvalue: null">
  {{ response.value }}
</td>

Как это отображается без значения в дочернем элементе:

Я ценю любые отзывы, которые кто-либо имеет.Я чрезвычайно новичок в этом и хотел узнать, какого чёрта я делал неправильно.:) Спасибо!

ОБНОВЛЕНИЕ Как оказалось, консоли также не нравился нуль на родительском компоненте, но это работало ... Все, что я хочу сделать, это отобразить пару ключ-значениев установленном порядке, а не в алфавитном порядке.Вот вам stackblitz .

Answer 1

Согласно документации здесь: https://angular.io/api/common/KeyValuePipe

Выходной массив будет упорядочен по ключам.По умолчанию компаратор будет по значению Unicode.При желании вы можете передать команду CompareFn, если ваши ключи имеют сложный тип.Как говорится, вы можете предоставить функцию сравнения, но я не понимаю, как это могло бы помочь.Не было бы «как написано» упорядочения (о котором я знаю).

Труба keyvalue является относительно новой ... так что одним из вариантов здесь было бы сделать это так, как мы это делали до keyvalue pipe, и это должно обрабатывать его в коде.

В компоненте:

  get keys() : Array<string> {
    console.log(this.responseStatus);
    return Object.keys(this.responseStatus);
  }

Этот код возвращает только набор ключей в порядке их определения.

В html:

<div *ngFor="let key of keys">
  {{ responseStatus[key] }}
</div>

Этот код перебирает эти ключи и обращается к элементу из пары ключ и значение.

Обновлен блик стека: https://stackblitz.com/edit/angular-xucsn6