时间戳

首页 > 解决方案 > 现在使用 RxJs 和 Angular 添加项目后刷新数据

javascript - 现在使用 RxJs 和 Angular 添加项目后刷新数据

问题描述

添加新项目后，我无法刷新角度材料表。检查我的问题。首先我的组件结构：

带有 ts html scss 的项目 1 文件夹内的主文件夹 带有 ts html scss 的项目 2 文件夹

这两个组件是独立的。没有父母孩子..没有兄弟姐妹。单击表项目 1 的行时，我显示项目 2 表。我从 item 1 表中获取 id 并从 item 1 中调用 item 2 + id。

对于实时刷新，我正在使用 RXJS，它在添加、删除或更新正在处理的表时起作用。例如，如果我在表项 1 中添加一些内容，则数据会立即刷新。校验码：

服务：

private _liveRefreshData$ = new Subject<void>();

  liveAutoRefresh() {
    return this._liveRefreshData$;
  }  

 postItem(item) {
 return this.http.post('api' , item).pipe(
    tap(() => {
      this._liveRefreshData$.next();
    })
  );

在组件 onInit 中只做：

this.apiService.liveAutoRefresh().subscribe(() => {
  this.functionWhichGetDataAndSubscriberOn(); 
});


functionWhichGetDataAndSubscriberOn() { // this is item 2 getter
this.subscription.push(
  this.apiService.getDataIDFromItem1(this.item_1_ID).subscribe( //get item1 id to call item 2
    (data) => { 
      this.documents = data; 
    },
    (error: any) => console.log(error)
  )
);

}

问题？我需要刷新数据但没有工作。在相同的组件和相同的项目上，这是可行的。例子。如果我在第 1 项组件表中添加第 1 项，这是可行的，但是当从第 1 项组件中添加第 2 项时（重要的是我需要从第 1 项组件对话框中添加第 2 项）我遇到了问题。

只是我的列表没有刷新。我添加了一个项目，我需要刷新页面以再次查看新添加的项目或再次单击以行项目以进行新的 api 调用并显示新项目。

请问这个怎么解决？是否可以这样做或寻找另一个？我只需要刷新实时数据，添加一个项目，问题是我将 2 个独立的表从一个表添加到另一个表。

标签： javascriptangularrxjs

解决方案

抱歉，您提供的代码仍然缺少一些重要信息。我将稍微编辑您的代码，以便向您展示我将如何解决它。

让您的Service将 id 与 Observable 一起提交。

private _liveRefreshData$ = new Subject<number>();

liveAutoRefresh(): Observable<number> {
    return this._liveRefreshData$.asObservable();
}  

 postItem(item) {
     return this.http.post('api' , item).pipe(
         tap(() => {
             this._liveRefreshData$.next(item.id);
         })
  );

在第二个表的组件中使用 id 如下：

this.apiService.liveAutoRefresh().subscribe( id => {
    this.functionWhichGetDataAndSubscriberOn(id); 
});


functionWhichGetDataAndSubscriberOn(id: number): void {
    this.subscription.push(
          this.apiService.getDataIDFromItem1(id).subscribe(
              (data) => { 
                  this.documents = data; 
              },
              (error: any) => console.log(error)
          )
);

如果您的实施的其余部分是正确的，那么这应该可以工作。

推荐阅读