Angular7，分页。我无法将页面加载到组件中

Question

我从angular开始，我有一个项目，在这个项目中我向后端发出请求，这些请求返回属性数据，比如说大约2000个结果。后端对我来说使分页更容易，我仅发出POST请求，并且在正文中传递所需的页面。我有两个视图，一个是显示带有数据的卡片的组件，另一个是页面，还有一个服务，稍后将向您显示。 页面运行良好，由于存在数据的组件无法更新新页面，因此我无法在逻辑中进行任何操作。我已经为英语表示歉意。我将为您保留模板，组件和服务的代码。谢谢。

[DataTemplate]

<!--SPINER-->
<div class="spinner-border text-info" role="status" *ngIf="loading">
  <span class="sr-only">Loading...</span>
</div>
<!-- RESULTS-->
<div class="result-area" *ngIf="!result && !loading">
  <img
    class="icon"
    src="../../assets/Content/Images/no-result-icon.png"
    alt=""
  />
  <section>
    <h1 class="ng-binding">No existen resultados para los filtros escogidos</h1>
    <p class="ng-binding">
      Modifica tu elección de filtros para buscar entre <br />nuestras
      propiedades
    </p>
  </section>
</div>
<!-- !RESULTS -->
<div class="result-area">
  <div class="card-columns row" *ngIf="result">
    <span class="col-12">Total de propiedades: {{this.resultnum}}</span>
    <div class="card col-3" *ngFor="let i of fullData" >
      <img src="../../../../assets/Content/Images/default-img.png" class="card-img-top" alt="..." />
      <div class="card-body">
        <h5 class="card-title">{{i.PropertyType}}</h5>
        <p class="card-text">
        <span>
          {{i.MunicipalityName + "," + i.NeighborhoodName}}
          <br><small class="text-muted">{{i.TotalArea}} m²</small>
        </span>
      </div>
    </div>
        <app-paginator></app-paginator>
  </div>
</div>

[DataComponent]

import { Component, OnInit } from "@angular/core";
import { PropiedadesService } from "src/app/Services/propiedades-service.service";

@Component({
  selector: "app-result-area",
  templateUrl: "./result-area.component.html",
  styleUrls: ["./result-area.component.css"]
})
export class ResultAreaComponent implements OnInit {
  result = false;
  loading = true;

  resultnum = 0;
  fullData: any;

  filtrosActivos: any[] = [];
  constructor(private _PropiedadesService: PropiedadesService) {}

  ngOnInit() {
     this.loadData();
 }
  loadData() {
    this._PropiedadesService.postSearchResult().subscribe((res: any) => {
      this.fullData = res.Result.Properties;
      this.loading = false;
      if (res.Result.Count > 0) {
        this.result = true;
        this.resultnum = res.Result.Count;
      }
    });
  }
}

[PaginationTemplate]

<ul class="pagination">
  <li class="page-item"><a class="page-link cursor-pointer" (click)="setPage(actualpage - 1)" >Previous</a></li>
  <li class="page-item" *ngFor="let i of fullData; let idx = index"><a class="page-link cursor-pointer" (click)="setPage(idx + 1)">{{idx+1}}</a></li>
  <li class="page-item"><a class="page-link cursor-pointer" (click)="setPage(actualpage - 1)" >Next</a></li>
</ul>

[PaginationComponent]
import { Component, OnInit, Output } from '@angular/core';
import { PropiedadesService } from 'src/app/Services/propiedades-service.service';

@Component({
  selector: 'app-paginator',
  templateUrl: './paginator.component.html',
  styleUrls: ['./paginator.component.css']
})
export class PaginatorComponent implements OnInit {

  allpages: any[];
  maxpages: number;
  @Output() actualpage: number;
  fullData: any;
  constructor(private propiedadesService: PropiedadesService) { }

  ngOnInit() {
    this.propiedadesService.postSearchResult()
    .subscribe((res: any) => {
      this.fullData = res.Result.Properties;
      this.maxpages = res.Result.Count;
      console.log(this.maxpages);
    });
  }
  setPage(page: number) {
     this.propiedadesService.pagSelected = page;
     this.actualpage = page;
     this.propiedadesService.postSearchResult();
     console.log(
       `Pagina anterior: ${this.actualpage - 1}
        - Pagina actual ${this.propiedadesService.pagSelected}
        - Pagina siguiente ${this.actualpage + 1 }`);
  }

}

[服务]

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { EventEmitter } from 'protractor';

@Injectable({
  providedIn: "root"
})
export class PropiedadesService {

  pagSelected = 0;

  /* FILTROS */
  private pourURL = "http://localhost:51654/api/v1/Purposes?lang=es";
  private muniURL = "http://localhost:51654/api/v1/Municipalities?lang=es";
  private typesURL = "http://localhost:51654/api/v1/PropertyTypes?lang=es";

  /* POST REQUEST DATA*/
  private searchResult = "http://localhost:51654/api/v1/MainSearch";


  /* REQUEST BODY */
  pagBody: any = {
    "Neighborhoods": [],
    "Page": this.pagSelected
  };

  constructor(private http: HttpClient) {}

  getPurposes() {
    return this.http.get( this.pourURL );
  }
  getMunicipalities() {
    return this.http.get( this.muniURL );
  }
  getTypes() {
    return this.http.get( this.typesURL );
  }
  postSearchResult() {

    return this.http.post(this.searchResult, this.pagBody);
  }

}