Angular 6 refresh Observable 删除后从后端获取所有条目

Question

我有一个 Observable，它从我的后端获取所有数据。当我对某个项目执行删除操作时，我想刷新这个 observable。
我尝试了两种可行的解决方案，但它们似乎真的很难看。 一种是强制 angular 重新加载当前路由，另一种是如下代码所示，以给定的时间间隔重新订阅 observable

component.ts:

data: Observable<Setting[]>;

ngOnInit() {
  this.data = interval(1000).pipe(
    startWith(0),
    mergeMap(res => this.dataService.fetchData())
  );
}

我在模板中使用异步管道来订阅我的 observable。

dataService.fetchData() 看起来像这样：

fetchData() {
  const fetch$: Observable <Setting[]> = this.apiService.getSettings().pipe(share());
  fetch$.pipe(
    map(allSettings => this.subject$.next(allSettings))
  );

  return fetch$;
}

component.html:

<table>
  <tr *ngFor="let s of data | async">
    <td>{{s.property}}</td>
    <td>
      <button (click)="s = s = s.Id; delete(s)">Delete</button>
    </td>
</table>

由于我的上一个解决方案不断向我的后端发送 GET 请求，这会浪费网络流量，有人知道如何使用其他技术刷新我的 Observable 吗？在 delete() 之后调用 fetchData() 不会更新我的视图。即使我在浏览器中刷新视图（使用 F5），更改也会出现。

编辑：

对象服务：

deleteSetting(keyName: string) {
  const x = this.apiService.delete(keyName);
  x.subscribe();
}

api服务：

delete(keyName: string): Observable<any> {
  let params = new HttpParams();
  params = params.append('keyName', keyName);

  return this.httpClient.delete<Setting>(this.API_URL + '/settings/delete', {params})
  .pipe(
    catchError(this.handleError('delete', []))
  );
}

component.ts 中的 delete():

deleteSetting() {
  this.settingsService.deleteSetting(this.keyNameToDelete);
  this.update.next(true);
}

Answer 1

使用 BehaviorSubject

BehaviorSubject 具有存储 “当前值。这意味着你总是可以直接得到最后一个 从 BehaviorSubject 发出的值

当您删除时，将您的 BehaviorSubject 值设为 true，然后订阅 ngOnInit 中的值

update=new BehaviorSubject<boolean>(false);

ngOnInit() {
  this.fetchData();
  this.update.subscribe(update=>update === true ? this.fetchData() : '');
}

fetchData(){
      this.data = this.dataService.fetchData();
}

内部删除方法

deleteSetting(keyName: string) {
  const x = this.apiService.delete(keyName);
  x.subscribe(()=>this.update.next(true););
}