Question

我试图了解RxJs中的Observables。我有一个带搜索框的页面，当用户开始输入时，Webservice会返回20个结果，然后当我按显示更多时，会显示下20个结果，依此类推。

我能够成功获得前20个成绩，但接下来20个，我无法与之前的成绩合并。

服务

@Injectable()
export class AppService {

constructor(private http : Http) {}

search(terms : Observable < string >) {

    return terms
      .debounceTime(400)
      .distinctUntilChanged()
      .switchMap(term => this.searchEntries(term));

  }

searchEntries(term) {

    const API = "https://jsonplaceholder.typicode.com/posts/";

    return this
      .http
      .get(API)
      .map(res => res.json());
  }

}

组件

export class AppComponent {

resp : Object;
searchTerm = new Subject < string > ();

constructor(private _searchService : AppService) {
this
  ._searchService
  .search(this.searchTerm)
  .subscribe(results => {
    this.resp = results;
  });
 }
}

HTML

<span *ngFor="let res of resp | slice:0:10">
      <a href="#" class="lex-column align-items-start">
        <div class="d-flex w-100 justify-content-between">
          <h5 class="mb-1">{{res.title}}</h5>
          <small># {{res.id}}</small>
        </div>
        <p class="mb-1">{{res.body}}</p>
        <small >Donec id elit non mi porta.</small>
      </a>
 </span>

我已将API网址替换为普通网址

请帮助将接下来的20个结果与之前显示的结果相结合。

Answer 1

您可以使用take(n)运算符

return terms
      .debounceTime(400)
      .distinctUntilChanged()
      .take(10)
      .switchMap(term => this.searchEntries(term));

每次只拍摄10件物品。

将下一个结果合并为一个并显示在Angular 2项目中

1 个答案: