我有一个组件我正在建造:
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的属性。当捕获结果订阅时
已更新。你可以从线上看到
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>
那个
有人知道我做错了什么吗?