Angular - передача значения с размером страницы в другой компонент - currentValue undefined Ошибка - PullRequest
Новая
       9

Angular - передача значения с размером страницы в другой компонент - currentValue undefined Ошибка

1 голос
/ 16 апреля 2020

Я создаю таблицу с нумерацией страниц, используя 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

Возможно, есть лучший способ сделать это, чтобы предотвратить эту ошибку, или, возможно, каким-то образом исправить эту ошибку?

Ответы [ 2 ]

1 голос
/ 16 апреля 2020

В начале Angular имеет несколько циклов обнаружения изменений, и кажется, что в одном из них массив @Input элементов не изменяется. То, что вы хотите сделать, это получить доступ к currentValue, если есть изменение, поэтому вы должны проверить, что есть изменения в элементах @Input: 

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

в противном случае change.items может быть неопределенным, если массив останется то же самое.

Также для лучшей отладки попробуйте внести изменения в протокол консоли, чтобы увидеть значение ваших данных

0 голосов
/ 16 апреля 2020

Попробуйте что-нибудь подобное: 

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

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

...