角度连接两个阵列并将其显示为分类列表

Question

在我的代码中，我使用fromFetch方法调用了两个json对象。我可以单独获取它们，并将它们作为一个数组显示在控制台上。项目$的categoryId与类别$的id相同。我想加入它们，并通过按类别$.name将它们分组，将它们显示为单个数组。我尝试了下面的方法，但没有成功，我应该怎么做才能实现这一点？TS:

items$: Observable<Item[]>;
categories$: Observable<Category[]>;
dataSource: MatTableDataSource<Item>;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;
displayedColumns: string[] = ['categoryId', 'name', 'quantityPerUnit'];
ngAfterViewInit(): void {
this.items$ = fromFetch(
'https:items.json'
).pipe(
switchMap((response) => {
return response.json();
})
);
this.items$.subscribe(function (result) {
const grouped = _.groupBy(result, (res) => res.categoryId);
this.dataSource = result;
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
console.log(grouped);
});
this.categories$ = fromFetch(
'https:categories.json'
).pipe(
switchMap((response) => {
return response.json();
})
);
this.categories$.subscribe(function (data) {
// const categoryGrouped = _.groupBy(result, (res) => res.name);
console.log(data);
});
var merged = _.merge(_.keyBy(this.items$, 'categoryId'), _.keyBy(this.categories$, 'id'));
var values = _.values(merged);
console.log(values);
}

Answer 1

没有lodash版本。您还可以对loadash进行深度克隆，这样就不会出现引用错误。如下所示。

设output=cloneDeep(元素(；

我们需要执行forkJoin来获得这两个api调用并合并它们！

@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;
displayedColumns: string[] = ['categoryId', 'name', 'quantityPerUnit'];
ngAfterViewInit(): void {
this.items$ = fromFetch('https:items.json').pipe(
switchMap(response => {
return response.json();
})
);
this.categories$ = fromFetch('https:categories.json').pipe(
switchMap(response => {
return response.json();
})
);
forkJoin([this.items$, this.categories$]).subscribe(([items, categories]: Array<any>) => {
const finalArray: Array<any>= [];
items.forEach((element: any) => {
let output = {...element};
const foundCategory = categories.find(x => x.categoryId === element.categoryId);
if(foundCategory) {
output = {...output, ...foundCategory};
}
finalArray.push(output);
});
this.dataSource = finalArray;
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
});
}