使用RxJS的角数据服务

Question

可选项显示详细信息的摘要。当编辑详细项时，我想用更新的信息更新可选项。

我有一个api服务，它使用HttpClient从后端获取值。

api.service.ts

public getAllItems(): Observable<Item[]> {
return this.http.get<Item[]>(this.apiUrl + '/items')
  .map(response => {
    return response.map((item) => new Item(item));
  });
}

items-data.service.ts

get items$(): Observable<Item[]> {
  return this.api.getAllItems();
}

主组件（左侧）只注册可观察的数据服务。

item-master.component.ts

data$: Observable<Item[]>;

constructor(private itemsDataService: ItemsDataService) { }

ngOnInit() {
  this.data$ = this.itemsDataService.items$;
}

<div *ngIf="(data$ | async) as data">

Answer 1

假设我正确回答了您的问题，我将把服务更改为如下所示（这是一个非常示意性的描述）：

items$: Observable<Array<Item>>;

currentItemId$ = new Subject<String>();

currentItem$: Observable<Item> = this.currentItemId$.map(<your fetch code>);

loadItem(itemId) {
  this.currentItemId$.next(itemId);
}

无论何时单击主视图中的项，它都将调用loaditem()方法，该方法将获取特定值并将其管道传递到currentitem$。

这为您提供了一种更面向服务的（使用存储）方法，也就是说，您告诉它加载一个项目，并在公开的可观察的