예상치 못한 결과보다 전체 수집에서 앵귤러 앱을 당기기

Question

각도 API에서 관찰 가능 정보를 사용하여 Google API에서 데이터를로드합니다. 끌어낼 항목이 많으므로 페이지 매김을 처리하는 데 ng2 페이지 매김을 사용하고 있으며 페이지를로드 할 때마다 데이터를 가져 오도록 설정하고 있습니다. 즉, 처음에는 첫 페이지가로드 될 때 처음 15 개의 결과가 표시됩니다. 다른 페이지는 페이지 번호를 클릭하면 해당 페이지에만 해당하는 데이터를로드합니다.

이제 저는 Postman에서 실행했을 때 예상대로 전체 콜렉션보다 결과가 한정되어 있기 때문에이 API 호출이 작동하는지 확인할 수 있습니다.

그러나 앵귤러 앱에서 사용하는 관찰 가능 기능을 사용하여이 기능을 연결하려고 시도 할 때 전체 컬렉션에서 여전히 당겨지는 것을 볼 수 있습니다. 내가 지금처럼 가입 및 요청하고

getByCategory(category: string, page, pagesize) { 
    const q = encodeURIComponent(stage); 
    return this.http.get 
    (`https://api.someurl.com/${this.ver}/clients/category/${q}?apikey=${this.key}&page=${this.page}&pagesize=${this.pagesize}`) 
     .map((response: Response) => response.json()) 
     .catch(this.stageErrorsHandler); 
} 
    stageErrorsHandler(error: Response) { 
    console.error(error); 
    return Observable.throw(error.json().error || 'Server error'); 
} 

내 구성 요소에서 :

이

내가 (페이지 수를 나타냅니다 여기에 '페이지'및 '페이지 크기는'페이지 당 결과를 나타냅니다) API 호출을 위해 무엇을 가지고 12 개 결과 페이지 1이 반환

ngOnInit() { 
    this.clientService.getByCategory('consulting', 1, 12) 
     .subscribe(resRecordsData => { 
      this.records = resRecordsData; 
      console.log(this.records); 
     }, 
     responseRecordsError => this.errorMsg = responseRecordsError); 
} 

그리고, 도면에서, I는 반복 배열하고,이 같은 페이징 파이프를 통해 상품을 전달 :

<tr *ngFor="let record of records.data | paginate: { id: 'clients', itemsPerPage: 12, currentPage: page, totalItems: records.count }"> 

    <pagination-controls class="paginator" (pageChange)="page = $event" id="clients" 
      maxSize="15" 
      directionLinks="true" 
      autoHide="true"> 
    </pagination-controls> 

그런데 api 호출은 총 개수와 객체 배열을 반환합니다. 페이지 매김 도구가이를 사용하여로드 할 페이지 수를 결정하기 때문입니다. - 그래서 API는 다음과 같습니다 '데이터'는 기록의 수집 및 '카운트는'기록의 총 수입니다 :

{ 
    "count": 10438, 
    "data": [ 
    { 
     "id": "someId", 
     "name": "someName" 
    } 
     ] 

나는 ngOnInit 수명주기의 로그 (this.records를) 콘솔

, 무엇을 수익은 예상대로 12 개 결과의 유한 목록이 아니라 전체 컬렉션입니다.

오브젝트 {횟수 : 10728, 데이터 : 배열 (4037)}

은 내가 전체 컬렉션을 받고 있어요 이유는 확실하지 않다 이것은 내가 콘솔에서 볼 것입니다. 앞서 언급했듯이이 호출은 Postman과 함께 시도 할 때 작동하지만 여기서는 예상대로 작동하지 않는 것으로 보입니다.

내가 여기에없는 것에 대한 아이디어가 있습니까? 관찰 대상을 사용하는 방법에 문제가 있습니까?

Answer 1

Chrome 개발자 도구의 '네트워크'탭에서 서비스 호출 URL을 보았습니까? URL 템플릿이

https://api.someurl.com/${this.ver}/clients/category/${q}?apikey=${this.key}&page=${this.page}&pagesize=${this.pagesize} 

올바르게 렌더링 되나요? params (category : string, page, pagesize)를 함수에 전달하기 때문에 "this"없이 참조하십시오. - 예 : $ {page}