angular - Rxjs Behavior サブジェクトが ionic 4 および angular 7 を使用して UI 上のデータを更新しない

Question

タイプ BehaviourSubject の配列がサービスで定義および初期化されており、別の関数を使用して編集すると更新されます。ただし、UI に表示される結果は新しく編集された配列のものではありませんが、変更はサーバー上の外部データベースに正常に適用されます。

多くのオンライン ソリューションを試しましたが、それでもうまくいきません。

「ServicesService」という名前のサービスで配列を初期化するためのコードを次に示します。

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

これは、オブザーバブルとして配列にアクセスするためのサービス内の関数です。

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

}

配列内の 1 つの要素を削除するサービスの関数を次に示します。まず、ローカル アレイではなくサーバー上で削除します。

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 メソッドを呼び出し、この関数を使用して 1 つの要素を削除します。

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

私が期待していたのは、配列から要素を削除すると、ページを更新したりページに再度アクセスしたりしなくても、UI のリストから削除する必要があるということでしたが、これはうまくいかないようです。

これを解決する方法についてあなたの助けに感謝します。