在我的Angular服务中,我有以下方法:
// creates an Item and returns the ID of the created Item
createItem(item: Item): Observable<ItemId> {
return this.http.post<ItemId>('some_api_url', item);
}
// returns all Items
getAllItems(): Observable<Item[]> {
return this.http.get<Item[]>('some_api_url');
}
在我的模板中,我正在列表中显示项目。
我希望能够创建一个新项目,然后重新加载列表(以包括新创建的项目),因此我实现了以下内容:
this.itemService.createItem(item)
.pipe(
switchMap(createdId => this.itemService.getAllItems())
).subscribe(result => {
this.items = result;
});
这似乎工作正常,但最后我还要对
createdId
进行一些处理:this.itemService.createItem(item)
.pipe(
switchMap(createdId => this.itemService.getAllItems())
).subscribe(result => {
this.items = result;
// i would like to use createdId here as well
});
因此,我提出了以下建议:
this.itemService.createItem(item)
.pipe(
switchMap(createdId =>
combineLatest(this.itemService.getAllItems(), of(createdId)))
).subscribe(result => {
this.items = result[0];
// doing some stuff with result[1], which is the value of createdId
});
但是必须在
combineLatest
中使用switchMap
并显式将createdId
设置为Observable
,这使我想知道这是否是一个好的解决方案。所以基本上我想创建和项目,更新列表(当项目创建完成时),并在更新完成时使用已创建项目的ID。
有一个更好的方法吗?
我真的很感谢任何建议。
最佳答案
在深入研究RxJS运算符后,我发现最干净的解决方案可能是简单地将concat
与toArray
结合使用:
// import { concat } from 'rxjs';
// import { toArray } from 'rxjs/operators';
concat(
this.itemService.createItem(item),
this.itemService.getAllItems())
.pipe(toArray())
.subscribe((result: [ItemId, Item[]]) => {
// result[0] is the ItemId
// result[1] is the Item[]
});