找不到类型不同的支持对象'[object Object]'可观察的对象数组

Question

我从服务器检索一个对象数组，在我的应用程序中，我按类别对这些数据进行分组，以显示每个类别的名称和类型。

http.get(url).map(res => res.json()).flatMap(array => array)
.groupBy(cat => cat.name)
.flatMap(cats => cats.reduce(acc, cat) => {
  cats.name = cat.name;
  cats.types.push(cat);
}, {types: []})

这会产生如下数据：

[{name: "ENTERTAINMENT", type: "BUSINESS"},
{name: "ENTERTAINMENT", type: "CHARITY"},
{name: "GAS" type: "TRANSPORTATION"}]

并将其转换为：

[{name: "ENTERTAINMENT", types: [{type: "BUSINESS"}, {type: "CHARITY"}],
{name: "GAS", types: [{type: "TRANSPORTATION"}]]

这很好用。我想迭代外部observable来显示名称，然后遍历类型并显示它们，例如。

<cats *ngFor="let cat of cats | async">
  {{cat.name}}
  <types *ngFor="let type of cat.types">{{type.type}}</types></cats>

当我这样做时，我得到了

Cannot find a differ supporting object '[object Object]' of type 'ENTERTAINMENT'.

如果我只是将.toArray()添加到observable并删除async，我可以正常工作，但我正在尝试使用observable来使其工作。

我还尝试使用trackBy来检查名称

*ngFor="let cat of (cats | async); trackBy cat?.name"

然而，当我这样做时，我得到了同样的错误。

我有什么方法可以使用ngFor中的可观察对象数组吗？