代码之家  ›  专栏  ›  技术社区  ›  r3plica

角度8分页页面计数不更新

  •  0
  • r3plica  · 技术社区  · 6 年前

    我有一个组件我正在建造:

    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>
    

    那个 有人知道我做错了什么吗?

    0 回复  |  直到 6 年前
        1
  •  1
  •   Poul Kruijt    6 年前

    您没有绑定以正确订阅。你会失去 this 上下文。您应该为此使用箭头函数(或使用 bind ):

    this.searchService.result.subscribe((result) => this.build(result))
    
    推荐文章