如何在RXJS Observable中轉換屬性

Question

我必須在RXJS Observable中轉換對象屬性。 使用“地圖”運算符可以工作。 當我兩次訂閱同一個可觀察對象時，將發生問題：屬性被兩次轉換

我嘗試使用“共享”運算符和多種變體，但似乎無濟於事

代碼示例：

    const source = of(
      { id: 1, name: 'John' },
    );

    const personObservable = source.pipe(
      map(person => { 
        person.name = person.name + '_test'; return person; 
      }),
    );

    personObservable.subscribe(
      person => console.log('first: ', person)
    );

    personObservable.subscribe(
      person => console.log('second: ', person)
    );

預期結果：

first:  John_test
second:  John_test

實際結果：

first:  John_test
second:  John_test_test

Answer 1

這是因為您要兩次修改同一對象實例。 當地圖返回該對象的副本時，將不會發生。 嘗試這個：

const personObservable = source.pipe(
      map(person => ({
          ...person,
          name: person.name + '_test'
      })),
    );

您還可以將shareReplay運算符與原始映射功能一起使用：

const personObservable = source.pipe(
  map(person => { 
        person.name = person.name + '_test'; return person; 
      }),
  shareReplay()
);

Stackblitz

Answer 2

另一個解決方案是使用Observable.create或new Observable()創建您的Observable。

of建立組播觀察到。 new Observable將創建一個冷的單播Observable，它為每個Observer發出一個新的對象實例。

const source = new Observable((subscriber) => {
  subscriber.next({ id: 1, name: 'John' });
  subscriber.complete();
});

const personObservable = source.pipe(
  map(person => { 
    person.name = person.name + '_test'; return person; 
  }),
);

personObservable.subscribe(
  person => console.log('first: ', person)
);

personObservable.subscribe(
  person => console.log('second: ', person)
);

工作StackBlitz：

https://stackblitz.com/edit/angular-bdhjuo

我最近還寫了一篇文章，解釋了熱和冷的Observables，您可能會發現它很有用：

http://willtaylor.blog/rxjs-observables-hot-cold-explained/