Angular: распечатать пару значений ключа, сохраненную в массиве

Question

В моем проекте Angular я получаю данные из несортированного бэкэнда. Данные поступают в виде пар ключей-значений в формате JSON. Сегодня я просто использую канал значения ключа для разделения ключей и значений на 2 столбца. Я все еще хочу сделать это, но я хочу, чтобы данные были упорядочены в определенном порядке c. Я решил использовать массив для размещения данных в правильном порядке. (пользовательский канал) Проблема в том, что я не знаю, как получить элементы пар ключ-значение, которые хранятся в этом массиве. Прямо сейчас он просто распечатывает [объект объекта]. Есть ли другой канал или что-то, что я мог бы использовать для получения данных?

Прямо сейчас мой код выглядит следующим образом:

    <tr *ngFor="let f of mydata$ | async | custompipe | keyvalue">
            <td class="key">{{ f.key | titlecase }}:</td>
            <td class="value">{{ f.value }}</td>
          </tr>

Редактировать: myData $ - это Наблюдаемая, которая получает свои данные из хранилища избыточных данных.

В моем канале есть преобразование, которое возвращает массив со значениями ключей, или, если быть более точным, c интерфейс с ключами и значениями.

transform(input: any): myKeyValueInterface[] {
    let output: myKeyValueInterface[] = [];
    for (const key in kundinfo) {
      if (kundinfo.hasOwnProperty(key)) {
        console.log(key + ': ' + kundinfo[key]);
        const newElement: myKeyValueInterface= {key, value: input[key]};
        output.push(newElement);
      }
    }
    return output;
  }

Answer 1

keyvalue pipe преобразует объект или карту в массив пар ключ-значение.

Вы уже преобразовали входные данные в массив с помощью своего пользовательского канала, поэтому вам нужно просто удалить канал keyvalue, и он должен работать.

<tr *ngFor="let f of mydata$ | async | custompipe">
    <td class="key">{{ f.key | titlecase }}:</td>
    <td class="value">{{ f.value }}</td>
</tr>