我如何在用户输入密钥UP事件上调用多个请求

Question

我试图在文本框输入键UP事件上调用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);
}

Answer 1

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

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;
  });
}

Answer 2

这样更新您的代码：

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]) => {
        return { first, second };
      })
    )
    .subscribe({first, second} => this.players = first.players, this.conversations = second);
    }