Angular：打印出存储在数组中的键值对

Question

在我的 Angular 项目中，我从未排序的后端获取数据。数据以 JSON 格式的键值对形式出现。今天我只是使用键值管道将键和值拆分为 2 列。我仍然想这样做，但我希望数据按特定顺序排序。我选择使用数组来按正确的顺序放置数据。（自定义管道）问题是我不知道如何获取存储在此数组中的键值对的元素。现在它只是打印出 [Object object]。是否有其他管道或其他东西可以用来获取数据？

现在我的代码看起来像这样：

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

编辑： myData$ 是一个从 redux 存储中获取数据的 Observable。

我的管道有一个转换，returns 一个带有键值的数组，或者更具体地说，一个带有键和值的接口。

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 将 Object 或 Map 转换为键值对数组。

您已经使用自定义管道将输入转换为数组，因此只需删除 keyvalue 管道即可。

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

Angular：打印出存储在数组中的键值对

Angular: Print out keyvalue pair stored in array

pipe

key-value

typescript

angular