Angular 5 Material Paginator сбрасывает в отрицательные значения при обновлении pageIndex - PullRequest
Новая
       21

Angular 5 Material Paginator сбрасывает в отрицательные значения при обновлении pageIndex

0 голосов
/ 05 июня 2018

Я использую таблицу данных Angular Material для отображения списка объектов, к которым можно добавить.Когда объект добавляется в источник данных, индекс страницы разрывается и показывает отрицательный знак.Единственный способ, который я нашел, чтобы исправить это, это сбросить индекс страницы для paginator для материала на 0. Однако любые дальнейшие изменения в paginator приводят к pageIndex, равному -1, или к разбитому paginator.Вот пример:

Сначала я устанавливаю новые данные в источнике данных Angular Material следующим образом: 

private refreshTable() {
    // first we update the length of the paginator with the new length of the datasource data to ensure parity
    this.paginator.length = this.dataSource.data.length;


    // next we get the current page number so we can return to it later.
    let currentPage = this.paginator.pageIndex;

    this.tempSubscription2 = this.rrService.getSearchResults(this.searchEnv.outputPayload(true, true)).subscribe(
        (data: any) => {
            this.extractSBRs(data);
            this.dataSource.data = [];
            // Here is where the dataSource is reset...
            this.dataSource.data = this.sbrs;

            this.paginator.length = this.dataSource.data.length;
            this.paginator.pageIndex = 0;
            this.dataSource.paginator = this.paginator;
            console.log('made it this far');

            if (this.dataSource.paginator.pageIndex < currentPage) {
                console.log('need to return to the current page');
                this.paginator.pageIndex = currentPage;
                this.paginator._pageIndex = currentPage;
                this.dataSource.paginator.pageIndex = currentPage;
                this.dataSource.paginator._pageIndex = currentPage;

            }
        },
        (err: any) => {
        },
        () => {
        }
    );
}

Когда этот код выполняется, обновления с первой страницы выполняются нормально, потому что this.paginator.pageIndex устанавливается в 0. Как только элемент добавляется на страницу больше нуля, таблица показывает первую страницу, у paginator есть pageIndex, равный -1, и paginator в пользовательском интерфейсе выглядит следующим образом:

enter image description here

Обратите внимание на отрицательный индекс -9 - 0.Кажется, что очень мало примеров обновления таблицы данных угловых материалов и еще меньше, где есть дополнительные примечания о том, как их обновление влияет на пагинатор угловых материалов.Как я могу заставить paginator перейти на pageIndex, отличный от 0, без проблем с отрицательным индексом?

Я пытался обновить только this.paginator, который захватывается через ViewChild() в соответствии с рекомендацией здесь .Я также попытался обновить dataSource.paginator, который вы можете увидеть в приведенном выше коде.

Вот мой импорт: 

import {
AfterContentInit, AfterViewInit, ApplicationRef, ChangeDetectorRef, 
Component, OnDestroy, OnInit,
    ViewChild
} from '@angular/core';
import { SearchEnvironment } from "../classes/search-environment";
import { SearchFilterDropdown } from "../classes/search-filter-dropdown";
import { ActivatedRoute, Router } from "@angular/router";
import {MatTableDataSource, MatPaginator, MatDialog, MatTable, MatSnackBar} from "@angular/material";
import { RemoteRetrievalService } from "../core/services/remote-retrieval.service";
import { Observable } from "rxjs/Observable";

Как я могу получить желаемое поведение paginator возврата киндекс currentPage, не вызывая отрицательный индекс в значении paginator.pageIndex или плохой пользовательский опыт отрицательных значений в диапазоне элементов?

1 Ответ

0 голосов
/ 05 июня 2018

Странно, как они строят некоторые из этих компонентов.Я не уверен, что мое решение будет работать, но на основании того, что я прочитал в этом выпуске, кажется, что они не могут обрабатывать как length изменение, так и pageIndex изменение в одном цикле дайджеста.

Поэтому я бы рекомендовал сначала изменить length, а затем - pageIndex. 

 this.paginator.length = this.dataSource.data.length;
 this.paginator.pageIndex = 0;
 this.dataSource.paginator = this.paginator;
 console.log('made it this far');

. Приведенное выше описание устанавливает значения, которые, как мы знаем, будут работать с компонентом, а в следующей части будет использоваться window.setTimeoutчтобы запустить следующий набор изменений после того, как компонент сможет обновить себя. 

 if (this.dataSource.paginator.pageIndex < currentPage) {
     window.setTimeout(()=>{
         this.zone.run(()=>{
            console.log('need to return to the current page');
            this.paginator.pageIndex = currentPage;
            this.paginator._pageIndex = currentPage;
            this.dataSource.paginator.pageIndex = currentPage;
            this.dataSource.paginator._pageIndex = currentPage;
            // EDIT: You must then set the datasource paginator back to the newly edited paginator. 
            this.dataSource.paginator = this.paginator;
         });
     });
 }

Вам нужно будет ввести NgZone, чтобы запустить код внутри зон Angular (который предназначен для обработки ошибок).Это просто хорошая практика при использовании window.setTimeout.

Имейте в виду, что window не существует в Angular Universal, если вы хотите позже выполнить рендеринг на стороне сервера, но это другая проблема.

...