如何为Angular 6项目一次从JSON文件中获取一定数量的信息?

时间:2018-11-01 17:05:42

标签: json angular typescript http pagination

我正在使用Angular 6创建一个科学文章搜索引擎,我需要添加分页。 这是我的搜索功能

search() {
    var query: string = window.location.search.substring(1).split("=")[1];
    this.http
      .get(
        "http://my.json/_search?q=" +
          query +
          "&size=100"
      )
      .subscribe(response => {
        this.response = response;
      });
  }

因此,目前我只检索100篇文章。该数据库当前有15,000多条文章,因此,我限制了页面加载后接收的文章数量。在最坏的情况下,我可以轻松地放&size=15000,但这会花费很长的页面加载时间。有没有办法一次加载几篇文章,比如说10条,然后每次我移到另一页时,还会从JSON中抽取另外10条?

我目前也在使用它进行分页

<div *ngFor="let hit of response.hits.hits | orderBy: key : true | paginate: { itemsPerPage:6, currentPage: p} let i = index">
    <!--HTML Code in here-->
</div>
<pagination-controls (pageChange)="p =$event"></pagination-controls>

1 个答案:

答案 0 :(得分:0)

@BryanBastida,当然。通常,您的服务器只需要两件事:

1.-一个返回文章数的函数(必须进行分页)

2。-该函数返回的下一个10个项目比“键”大。只是在Angular中将每个页面的“键”存储在数组中。

   /*If your page=0 show 1,2,5,6,9 and page=1 show 10,12,15,16,17
    lastItem[0]=9, lastItem[1]=17;
   */
    lastItem:any[]=[];
    //Each change of page
    changePage(page)
    {
       let firstItem=page==0?:null:(firstItem.length<page-1)?firstItem[page-1]:lastItem;
       get("myUrl?firstItem=firstItem).subscribe(res=>{
         if (res)
         {
            lastItem[page]=res[res.length-1].key
            this.data=res;
         }
       )
     }