如何准备数据加载数据显示在UI界面？

Question

我从服务器接收数据 - 类别数组：interface Category {id: number, name: string, items: []}

我想根据每个类别创建一个组，因为该类别有 items: []，所以该组就像一个下拉元素 - 单击时打开和隐藏。

让我们假设组是这样定义的：interface Group {id: number, name: string, elements: []}.

假设在父组件中我得到类别：

public categories $: Observable <Category []>;

在这个组件的模板中，我将类别归为一组：

<app-category-group * ngFor = "let cat of categories $ | async"> </app-category-group>

如何不混合使用 Category 和 Group 类型？无论Group中的内容是什么。在哪里做这个？在获取类别转换为另一种类型后的父项中Group？同时，我不想改变原始数据。

我试过这个：

GroupsComponent:

public categories$: Observable<Category[]>;
public categoriesGroup$: Observable<CategoryGroup[]>;

constructor() {
   this.categoriesGroup$ = this.categories.pipe((map(category) => {name:"Group1", items: category} as Group)
}

}

内部 GroupsComponent 模板：

<app-groups-component>
   <app-group-component *ngFor="let groupCategory of categoriesGroup$" [group]="groupCategory"></app-group-component>
</app-groups-component>

你怎么看？

Answer 1

这里我尝试实现你目前想要的。

Playground

我猜你不需要 mutate/modificate 数据，如果你有方便的数据嵌套形状。

如果您没有方便的数据形状，那么您可能想要应用一些 groupBy 逻辑或将数据映射到填充项目所需的形状。

希望对你有用。

如何准备数据加载数据显示在UI界面？

How to prepare data loaded data to display in UI intreface?

observable

typescript

angular