Как получить информацию из файла JSON на определенную сумму за один раз для проекта Angular 6? - PullRequest
0 голосов
/ 01 ноября 2018

Я создаю поисковую систему для научных статей с 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 голосов
/ 01 ноября 2018

@ БрайанБастида, конечно. В общем, на вашем сервере вам нужны только две вещи:

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