Angular - 将具有页面大小的值传递给另一个组件 - currentValue undefined 错误答案

【问题标题】：Angular - passing a value with page size to another component - currentValue undefined ErrorAngular - 将具有页面大小的值传递给另一个组件 - currentValue undefined 错误
【发布时间】：2020-07-29 20:43:11
【问题描述】：

我正在使用 jw-angular-pagination 构建一个带有分页的表格

这是我的 home.component.ts

 pageSize = 10;

home.component.html

<div (click)="pageSize=1 ">Change page size to 1</div>
...
<app-jw-pagination [items]="items" [size]="pageSize" (changePage)="onChangePage($event)"></app-jw-pagination>

我正在尝试将值传递给 Pagination.component.ts

    @Input() items: Array<any>;
    @Output() changePage = new EventEmitter<any>(true);
    @Input() initialPage = 1;
    @Input() maxPages = 3;
    @Input() size;

    constructor() {
    }

    pager: any = {};

    ngOnInit() {
        // set page if items array isn't empty
        if (this.items && this.items.length) {
            this.setPage(this.initialPage);
        }
    }

    ngOnChanges(changes: SimpleChanges) {
        // reset page if items array has changed
        if (changes.items.currentValue !== changes.items.previousValue) {
            this.setPage(this.initialPage);
        }
    }

     setPage(page: number) {
        // get new pager object for specified page
        this.pager = paginate(this.items.length, page, this.size  , this.maxPages);

        // get new page of items from items array
        const pageOfItems = this.items.slice(this.pager.startIndex, this.pager.endIndex + 1);

        // call change page function in parent component
        this.changePage.emit(pageOfItems);
    }
}

当我只传递一个在家庭组件 (10) 中设置为默认值的值时它正在工作，但是当我尝试使用函数更改一个值时（单击）我得到一个错误

home.component.html ERROR TypeError: Cannot read property 'currentValue' of undefined
    at JwPaginationComponent.ngOnChanges (jw-pagination.component.ts:33)
    at checkAndUpdateDirectiveInline (core.js:31906)
    at checkAndUpdateNodeInline (core.js:44367)
    at checkAndUpdateNode (core.js:44306)
    at debugCheckAndUpdateNode (core.js:45328)
    at debugCheckDirectivesFn (core.js:45271)
    at Object.updateDirectives (home.component.html:421)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:45259)
    at checkAndUpdateView (core.js:44271)
    at callViewAction

是否有更好的方法来防止该错误，或者有什么方法可以修复该错误？

【问题讨论】：

标签： javascript html angular pagination

【解决方案1】：

一开始，Angular 有几个变化检测周期，似乎其中一个项目 @Input 数组没有变化。你想要做的是访问 currentValue 如果有变化，所以你应该通过以下方式测试@Input 项目是否有变化：

if( changes.items ) {
      this.setPage(this.initialPage);
}

否则，如果数组保持不变，changes.items 可能是未定义的。

为了更好地调试，尝试控制台记录更改以查看数据的价值

【讨论】：

我稍微改变了一下，我的代码看起来像这样 if( changes.size || changes.items ) { this.setPage(this.initialPage);它正在工作，但还有另一个错误 ERROR TypeError: Cannot read property 'length' of undefined at JwPaginationComponent.setPage (jw-pagination.component.ts:43) at JwPaginationComponent.ngOnChanges (jw-pagination.component.ts:37 )
所以基本上我在启动应用程序时收到此错误，一切正常后
我编辑了我的回复 console.log(changes) 以清楚地看到您的数据结构。您还可以添加行调试器；使您的浏览器停止在您的线路上进行调试并进一步探索。但在这种情况下，看看你的实际数据 console.log 应该做什么。

【解决方案2】：

试试这样的：

ngOnChanges(changes: SimpleChanges) {
    if (changes.currentValue.items !== changes.previousValue.items) {
        this.setPage(this.initialPage);
    }
}

https://angular.io/api/core/SimpleChange

【讨论】：