From aeff4e121f333e66ddca34a7234a40f91843f116 Mon Sep 17 00:00:00 2001 From: Austin Date: Sun, 4 Dec 2016 12:50:20 -0500 Subject: [PATCH] Fix Add/Remove items in array not updating (#255) --- demo/basic/live.ts | 20 ++++++++++++--- demo/index.html | 9 ++++++- src/components/datatable.component.ts | 36 +++++++++++++++++++++------ 3 files changed, 54 insertions(+), 11 deletions(-) diff --git a/demo/basic/live.ts b/demo/basic/live.ts index 32819daa5..2e5c4b5c5 100644 --- a/demo/basic/live.ts +++ b/demo/basic/live.ts @@ -7,8 +7,10 @@ import { Component } from '@angular/core';

Live Data Demo - Start - Stop + Start | + Stop | + Add | + Remove

@@ -246,7 +253,7 @@ - Loading... + Loading...
Star
diff --git a/src/components/datatable.component.ts b/src/components/datatable.component.ts index bf723b307..e10360368 100644 --- a/src/components/datatable.component.ts +++ b/src/components/datatable.component.ts @@ -1,7 +1,8 @@ import { Component, Input, Output, ElementRef, EventEmitter, ViewChild, HostListener, ContentChildren, OnInit, QueryList, AfterViewInit, - HostBinding, ContentChild, TemplateRef + HostBinding, ContentChild, TemplateRef, IterableDiffer, + DoCheck, KeyValueDiffers } from '@angular/core'; import { forceFillColumnWidths, adjustColumnWidths, sortRows } from '../utils'; @@ -81,7 +82,7 @@ import { scrollbarWidth, setColumnDefaults, throttleable, translateTemplates } f class: 'datatable' } }) -export class DatatableComponent implements OnInit, AfterViewInit { +export class DatatableComponent implements OnInit, AfterViewInit, DoCheck { /** * Rows that are displayed in the table. @@ -348,14 +349,12 @@ export class DatatableComponent implements OnInit, AfterViewInit { * @memberOf DatatableComponent */ @Input() messages: any = { - // Message to show when array is presented // but contains no values emptyMessage: 'No data to display', // Footer total message totalMessage: 'total' - }; /** @@ -508,11 +507,11 @@ export class DatatableComponent implements OnInit, AfterViewInit { * if the horziontal scrolling is enabled. * * @readonly - * + * @type {boolean} * @memberOf DatatableComponent */ @HostBinding('class.scroll-horz') - get isHorScroll() { + get isHorScroll(): boolean { return this.scrollbarH; } @@ -660,6 +659,7 @@ export class DatatableComponent implements OnInit, AfterViewInit { private bodyHeight: number; private rowCount: number; private offsetX: number = 0; + private rowDiffer: IterableDiffer; private _rows: any[]; private _columns: any[]; @@ -667,9 +667,10 @@ export class DatatableComponent implements OnInit, AfterViewInit { private _columnTemplates: QueryList; private _rowDetailTemplateChild: DatatableRowDetailDirective; - constructor(element: ElementRef) { + constructor(element: ElementRef, differs: KeyValueDiffers) { // get ref to elm for measuring this.element = element.nativeElement; + this.rowDiffer = differs.find({}).create(null); } /** @@ -697,6 +698,17 @@ export class DatatableComponent implements OnInit, AfterViewInit { setTimeout(() => this.recalculate()); } + /** + * Lifecycle hook that is called when Angular dirty checks a directive. + * + * @memberOf DatatableComponent + */ + ngDoCheck(): void { + if (this.rowDiffer.diff(this.rows)) { + this.recalculatePages(); + } + } + /** * Toggle the expansion of the row * @@ -802,6 +814,16 @@ export class DatatableComponent implements OnInit, AfterViewInit { this.bodyHeight = height; } + this.recalculatePages(); + } + + /** + * Recalculates the pages after a update. + * + * + * @memberOf DatatableComponent + */ + recalculatePages(): void { this.pageSize = this.calcPageSize(); this.rowCount = this.calcRowCount(); }