Question

我基本上已经在我的HTML代码中

<ng-container *ngIf="lstSearchResults|async as resultList; else searching">
...
 <cdk-virtual-scroll-viewport class="scroll-container">
      <div *cdkVirtualFor="let search of resultList"  class="card-item" >

并在ts代码中：

 this.lstSearchResults = this.http.post<SearchResult[]>('services/search', search);

表示lstSearchResults显示在列表中。只要总是用新列表替换内容，代码就可以正常工作，即我可以一次填充20个项目，然后再填充20个项目，等等。

我想使用VirtualScrollPane的新Angular7功能。我要求新的搜索应在现有列表中添加20个新项目，即新列表的新长度应为40个项目。

我的方法是这样的

this.lstSearchResults.pipe(mergeMapTo (this.http.post<SearchResult[]>('services/search', search));
this.http.post<SearchResult[]>('services/search', search).pipe(mergeMapTo(this.lstSearchResults));

失败，因为the comment明确指出需要subscribe()来执行Post请求。因此，有一种方法可以将结果组合到

有40个项目的新列表
async完成了项目的加载，也就是说，我不必担心请求完成的时间。

Answer 1

一种方法是使用forkJoin。

import { forkJoin } from 'rxjs';

let req1 = this.http.post<SearchResult[]>('services/search', search);
let req2 = http.post<SearchResult[]>('services/search', search);

return forkJoin([req1 , req2]).pipe(map(result => [...result[0], ...result[1]]));

Angular HTTPClients：结合使用HTTP请求和Observables进行异步

1 个答案: