1

我在服务中定义并初始化了一个 BehaviourSubject 类型的数组，并在使用另一个函数对其进行编辑时对其进行更新。但是，UI 上显示的结果不是新编辑的数组，而是已成功将更改应用到服务器上的外部数据库。

我已经尝试了许多在线解决方案，但仍然无法正常工作。

这是名为“ServicesService”的服务中数组初始化的代码。

private _nationalProps: BehaviorSubject<NationalProp[]> = new BehaviorSubject<NationalProp[]>([]);

这是服务中将数组作为可观察对象访问的函数；

get national() {
    return this._nationalProps.pipe(take(1), map(nprops => {
      return [...nprops];
    })
    );

}

这是服务中用于删除数组中的一个元素的函数。首先，它在服务器上删除它而不是在本地阵列上。

deleteNationalProp(id: string) {
    return this.http.delete(this.serverUrl + `/national_props/${id}.json`)
          .pipe(
          switchMap(() => {
            return this._nationalProps;
          }),
          take(1),
          tap(props => {
      this._nationalProps.next(props.filter(b => b.id !== id));
    }));
  }

这是我订阅 BehaviourSubject 以跟踪任何更改的另一个组件中的代码；

propSub: Subscription; // imported from rxjs
loadedProps: NationalProp[];

ngOnInit() {
 this.propSub = this.servicesSrv.national.subscribe(props => {
      this.loadedProps = props;
    });

我在服务中调用 delete 方法来使用这个函数删除一个元素；

this.servicesSrv.deleteNationalProp(pId).subscribe();

我所期望的是，一旦我从数组中删除了一个元素，它也应该从 UI 的列表中删除，而无需刷新页面或重新访问页面，但这似乎不起作用。

我将感谢您对如何解决此问题的帮助。

4

2 回答 2

0

take(1)从这样的属性中删除后尝试national：

get national() {
    return this._nationalProps.pipe(map(nprops => {
      return [...nprops];
    })
    );
}
于 2019-07-18T02:30:55.477 回答
0

我设法解决了我自己的问题。任何有类似问题的人都可以在下面尝试我的解决方案。

我必须订阅 ionViewWillEnter() 生命周期钩子中的 observable 而不是 ngOnInit()

即从这里更改订阅：

ngOnInit() {
 this.propSub = this.servicesSrv.national.subscribe(props => {
      this.loadedProps = props;
    });

到这里：

ionViewWillEnter() {
 this.propSub = this.servicesSrv.national.subscribe(props => {
      this.loadedProps = props;
    });

同样要取消订阅，我必须在 ionViewWillLeave 而不是 ngOnDestroy 中进行。

即从这里更改退订：

ngOnDestroy() {
    if (this.proposalsSub) {
      this.proposalsSub.unsubscribe();
    }
  }

到这里：

ionViewWillLeave() {
    if (this.proposalsSub) {
      this.proposalsSub.unsubscribe();
    }
  }

我还更改了服务中的函数以返回可观察的。

即从此改变：

get national() {
    return this._nationalProps.pipe(take(1), map(nprops => {
      return [...nprops];
    })
    );

对此：

get national() {
    return this._nationalProps.asObservable();
    );
于 2019-07-19T00:33:52.567 回答