Angular 8 страница пагинацииСчет не обновляется

Question

У меня есть этот компонент, который я строю:

import { Component, OnInit, OnDestroy, Input } from "@angular/core";
import { Subscription } from "rxjs";

import { Result, Search } from "@models";
import { SearchService } from "@services";

@Component({
  selector: "sxp-pagination",
  templateUrl: "./pagination.component.html",
  styleUrls: ["./pagination.component.scss"],
})
export class PaginationComponent implements OnInit, OnDestroy {
  @Input() show: number = 4;

  private resultSubscription: Subscription;
  private searchSubscription: Subscription;
  private result: Result;
  private search: Search;

  pageCount: number = 0;

  constructor(private searchService: SearchService) {}

  ngOnInit() {
    this.getResult();
    this.getSearch();
  }

  ngOnDestroy() {
    if (this.resultSubscription) this.resultSubscription.unsubscribe();
    if (this.searchSubscription) this.searchSubscription.unsubscribe();
  }

  changePage(pageNumber: number): void {
    this.search.page = pageNumber;
    this.searchService.doSearch(this.search).subscribe();
  }

  private getSearch(): void {
    this.searchSubscription = this.searchService.search.subscribe(
      (search) => (this.search = search)
    );
  }

  private getResult(): void {
    this.resultSubscription = this.searchService.result.subscribe(this.build);
  }

  private build(result: Result): void {
    if (!result.count) return;

    this.result = result;

    this.pageCount = Math.ceil(this.result.count / 20);
    console.log(this.result.count);
    console.log(this.pageCount);
  }
}

Как вы можете видеть, у меня есть свойство pageCount, которое я инициализирую как 0. Когда подписка в результате поймана, pageCount обновлено. Вы можете видеть это по линии this.pageCount = Math.ceil(this.result.count / 20);. Как вы можете видеть, консоль выходит из свойства после того, как я установил его. В моей консоли это правильно показывает 153

Проблема в html, которая выглядит следующим образом:

page: {{ pageCount }}

<nav *ngIf="pageCount">
    <ul class="pagination">
        <li class="page-item" *ngIf="showPrevious"><a class="page-link" href="#">Previous</a></li>
        <li class="page-item" *ngFor="let page of pageCount"><a class="page-link" href="#">{{ page }}</a></li>
        <li class="page-item" *ngIf="showNext"><a class="page-link" href="#">Next</a></li>
    </ul>
</nav>

, что pageCount всегда остается на 0. Кто-нибудь знает, что я делаю не так?

Answer 1

Вы не обязаны подписываться правильно. Вы потеряете контекст this. Вы должны использовать функцию стрелки для этого (или использовать bind):

this.searchService.result.subscribe((result) => this.build(result))