如何在 behaviorSubject 上使用 shift？

Question

我有一個帶有 BehaviorSubject 的 class：

export class WordsService {
    private words = new BehaviorSubject<WordType[]>([]);

它由訂閱提供：

init() {
    this.databaseService.fetchWords().subscribe(
        (listaWords: WordType[]) => {
            this.words.next(listaWords);
        },
        errors => console.error('err'),
        () => console.log('suceed')
    )
}

當我重構這段代碼時：

private fetchWord(): void{
    this.word = this.wordService.getWords().shift();
}

我正在嘗試使用 .shift 獲取變量詞以獲取數據，以便它可以一次從 observable 中獲取一個元素，以及何時完成所有元素的獲取。

Answer 1

看起來您正在嘗試將結果從WordType[]轉換為單個WordType 。

您可以像這樣應用map()運算符來執行此操作：

init(){
  this.databaseService.fetchWords().pipe(
    map(words => words.shift())
  )
  .subscribe(
    (listaWords: WordType[]) => {
      this.words.next(listaWords);
    },
    errors => console.error('err'),
    () => console.log('suceed')
  )
}

但是，您實際上不需要 BehaviorSubject 來執行此操作，您可以直接從服務調用中簡單地聲明您的可觀察對象：

public word: Observable<WordType> = this.databaseService.fetchWords().pipe(
  map(words => words.shift()),
  catchError(error => console.log(error))
);

現在，observable word只會發出您感興趣的值。

這使您可以在模板中使用async pipe 來管理訂閱，而無需自己在 controller 中進行操作。

Answer 2

我會在不轉移的情況下做到這一點。

想象一下你有任何可觀察的價值，對於這個可觀察的價值的每一次發射，你都想拉一個詞。 在我的示例中，此可觀察值是一次頁面點擊。

然后你可以這樣做：

const clicked$ = fromEvent(document, 'click');
const words$ = of(['AA', 'BB', 'CC', 'XX']);


const wordToPrint$ = zip(
  clicked$,
  words$.pipe(concatAll()),
).pipe(
  map(([,word]) => word),
);

wordToPrint$.subscribe(console.log);

請參閱 stackblitz： https://stackblitz.com/edit/rxjs-ep1k3v?file=index.ts