时间戳

首页 > 解决方案 > 如何在用户输入按键事件中调用多个请求？

angular - 如何在用户输入按键事件中调用多个请求？

问题描述

我正在尝试在文本框输入按键事件上调用 2 个 http 请求。

ngAfterViewInit() {
fromEvent(this.input.nativeElement, 'keyup')
return forkJoin(
  this.playerService
  .findPlayers(1, 'userName', this.input.nativeElement.value, 'asc', 0, 20),
  this.messagesService.getConversations()
)
.pipe(
  map(([first, second]) => {
    return { first, second };
  })
)
.subscribe({first, second} => this.players = first.players, this.conversations = second);
}

这是对单个请求正常工作的方法：

ngAfterViewInit() {
fromEvent(this.input.nativeElement, 'keyup')
.pipe(
  startWith({}),
  switchMap(() => {
    return this.playerService
    .findPlayers(1, 'userName', this.input.nativeElement.value, 'asc', 0, 20)
    .map(data => {
      return data.players;
    });
})).subscribe(players => this.players = players);
}

标签： angularrxjs

解决方案

对于每个输入信号切换映射到两个组合请求：

ngAfterViewInit() {
  fromEvent(this.input.nativeElement, 'keyup').pipe(
    switchMap(() => forkJoin(
      this.playerService.findPlayers(1, 'userName', this.input.nativeElement.value, 'asc', 0, 20),
      this.messagesService.getConversations()
    )),
    map(([first, second]) => ({ first, second }))
  ).subscribe(({first, second}) => {
    this.players = first.players;
    this.conversations = second;
  });
}

推荐阅读