如何在 behaviorSubject 上使用 shift？答案

【问题标题】：how to use shift on behaviorSubject?如何在 behaviorSubject 上使用 shift？
【发布时间】：2020-12-19 22:00:51
【问题描述】：

我有一个带有 BehaviorSubject 的课程：

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 获取变量 word 以获取数据，以便它可以一次从 observable 中获取一个元素，以及何时完成所有元素的获取。

【问题讨论】：

标签： node.js angular typescript rxjs

【解决方案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 来执行此操作，您可以直接从服务调用中简单地声明您的 observable：

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

现在，word observable 只会发出您感兴趣的值。

这使您可以在模板中使用async 管道来管理订阅，而无需在控制器中自己进行。

【讨论】：

【解决方案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

【讨论】：