Question

使用Angular 4.我有简单的寻呼机，无法使其正常工作。分页功能正在工作，但是当我更改页面时，数据被附加到而不是替换。当我查看正在创建的列表时，它会随着我更改页面而不是显示页面数据而增长。

ngFor使用的数组是否按预期工作？

                    <div class="row" [class.odd]="isOdd" [class.even]="isEven" *ngFor="let xen of  pager.pages ; let idx = index; let isOdd=odd;let isEven=even;trackBy: trackByFn">
                        <div class="col-md-1">#{{xen.issueid}}                                                 </div>
                    <ngb-pagination name="pager_bottom" [collectionSize]="pager.totalItems" [(page)]="pager.currentPage" [maxSize]="5" (pageChange)="loadPage($event)" [rotate]="false" [boundaryLinks]="true"></ngb-pagination>



getPager(totalItems: number, currentPage: number = 1, pageSize: number = 10, xens: xen[]) {
    // calculate total pages
    let totalPages = Math.ceil(totalItems / pageSize);

    let startPage: number, endPage: number;
    if (totalPages <= 10) {
        // less than 10 total pages so show all
        startPage = 1;
        endPage = totalPages;
    } else {
        // more than 10 total pages so calculate start and end pages
        if (currentPage <= 6) {
            startPage = 1;
            endPage = 10;
        } else if (currentPage + 4 >= totalPages) {
            startPage = totalPages - 9;
            endPage = totalPages;
        } else {
            startPage = currentPage - 5;
            endPage = currentPage + 4;
        }
    }

    // calculate start and end item indexes
    let startIndex = (currentPage - 1) * pageSize;
    let endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);

    // create an array of pages to ng-repeat in the pager control
    let pages = xens.slice(startIndex, endIndex);

    // return object with all pager properties required by the view

    this.pager.totalItems = totalItems;
    this.pager.currentPage = currentPage;
    this.pager.pageSize = pageSize;
    this.pager.totalPages = totalPages;
    this.pager.startPage = startPage;
    this.pager.endPage = endPage;
    this.pager.startIndex = startIndex;
    this.pager.endIndex = endIndex;
    this.pager.pages = pages; // ISN'T THIS REPLACING THE CURRENT ARRAY??? But it is actually appending as the list is constantly growing.
}

Answer 1

你在哪里以及如何调用getPager函数？从代码的外观来看，每次获取更大页面数组的原因可能是您总是将currentPage = 1（设置为默认值）传递给函数，这就是为什么startIndex始终为0。

Answer 2

发现问题，我在ngFor div之外有一个变量，导致了'有趣'的行为。我在div ngFor..Angular之外有{{xen.member}}，当yu没有严格的结构时，似乎做了一些奇怪的事情。

ngFor数组被追加而不是被替换

2 个答案: