ng2-bootstrap pagination и ошибка интеграции таблицы начальной загрузки

Я пытаюсь интегрировать компонент разбивки на страницы ng2-bootstrap и таблицу начальной загрузки.

У меня есть простая таблица начальной загрузки, которая загружается с помощью директивы ngFor:

<tr>
    <th *ngFor="#col of cols">{{col.header}}
</tr>
</thead>
<tbody>
    <tr *ngFor="#row of rows">
        <td *ngFor="#col of cols">{{row[col.field]}}</td>
    </tr>
</tbody>

Содержимое rows определяется компонентом разбивки на страницы: у меня есть массив с именем data, который содержит набор записей для таблицы. Длина массива используется для определения totalItems компонента пагинации:

<pagination class="pagination-sm"
            [(ngModel)]="page"
            [totalItems]="data.length"
            [itemsPerPage]="itemsPerPage"
            [maxSize]="maxSize"
            [boundaryLinks]="true"
            (pageChanged)="onPageChange($event)">
</pagination>

Переменная rows таблицы содержит только записи текущей страницы. Это делается с помощью события pageChange, предоставляемого компонентом пагинации:

onPageChange(page:any) {
        let start = (page.page - 1) * page.itemsPerPage;
        let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : this.data.length;
        this.rows = this.data.slice(start, end);
    }

Пока все хорошо... Проблема в том, что записи могут быть удалены из массива data. Если панель пагинации указывает на последнюю страницу, а затем записи удаляются из массива data, в консоли отображается следующая ошибка:

Expression 'rows in App@9:8' has changed after it was checked.

Живой пример можно найти здесь: http://plnkr.co/edit/5zxamBiWISBpEmXYP5UK?p=preview Просто нажмите кнопку last, а затем cut data.

Любой совет?


typescript angular pagination ng2-bootstrap
person Ayala    schedule 26.04.2016    source источник
comment
Мне не удалось заставить [itemsPerPage] работать правильно. Я установил значение и вызвал его сразу после закрытия тега в div, содержащем мою директиву * ngFor. Вам нужно было что-то делать в своей таблице, чтобы ограничить количество элементов на странице? я получаю все элементы на одной странице.   -  person Winnemucca    schedule 15.03.2017
comment
@Winnemucca ItemPerPage является свойством директивы разбиения на страницы и не влияет на таблицу. Так что да, вы должны ограничить данные таблицы. В приведенном выше плункере это делается функцией onPageChange.   -  person Ayala    schedule 16.03.2017

Ответы (1)


arrow_upward
4
arrow_downward

В качестве обходного пути я решил немного изменить функцию cutData. Перед каждым вырезом данных текущая страница сбрасывается на 1:

cutData(){
  this.page = 1;
  this.onPageChange({page: this.page, itemsPerPage: this.itemsPerPage})
  this.data = this.data.slice(0, this.data.length/2);
}

Теперь все работает, как и ожидалось.

Другой вариант (как указано здесь для аналогичная проблема) заключается в том, чтобы вручную инициировать обнаружение изменений для компонента после rows изменения:

constructor(private cd: ChangeDetectorRef) {}

(...)

onPageChange(page:any) {
    let start = (page.page - 1) * page.itemsPerPage;
    let end = page.itemsPerPage > -1 ? (start + page.itemsPerPage) : this.data.length;
    this.rows = this.data.slice(start, end);
    this.cd.detectChanges();
}
person Ayala    schedule 02.05.2016