Fix Add/Remove items in array not updating (#255)

swimlane · Dec 4, 2016 · aeff4e1 · aeff4e1
1 parent eac67bf
commit aeff4e1
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 11 deletions.
diff --git a/demo/basic/live.ts b/demo/basic/live.ts
@@ -7,8 +7,10 @@ import { Component } from '@angular/core';
       <h3>
         Live Data Demo
         <small>
-          <a href="#" (click)="start()">Start</a>
-          <a href="#" (click)="stop()">Stop</a>
+          <a href="#" (click)="start()">Start</a> |
+          <a href="#" (click)="stop()">Stop</a> | 
+          <a href="#" (click)="add()">Add</a> |
+          <a href="#" (click)="remove()">Remove</a>
         </small>
       </h3>
       <swui-datatable
@@ -30,8 +32,10 @@ import { Component } from '@angular/core';
 })
 export class LiveDataComponent {
 
+  count: number = 50;
   rows: any[] = [];
   active: boolean = true;
+  temp: any[] = [];
   cols: any = [
     'name', 'gender', 'company'
   ];
@@ -42,6 +46,8 @@ export class LiveDataComponent {
         d.updated = Date.now().toString();
         return d;
       });
+
+      this.temp = [...this.rows];
     });
 
     this.start();
@@ -61,6 +67,14 @@ export class LiveDataComponent {
     this.active = false;
   }
 
+  add() {
+    this.rows.splice(0, 0, this.temp[this.count++]);
+  }
+
+  remove() {
+    this.rows.splice(0, this.rows.length);
+  }
+
   updateRandom() {
     const rowNum = this.randomNum(0, 5);
     const cellNum = this.randomNum(0, 3);
@@ -70,7 +84,7 @@ export class LiveDataComponent {
 
     if(rows.length) {
       let row = rows[rowNum];
-      row[prop] = this.rows[newRow][prop];
+      row[prop] = rows[newRow][prop];
       row.updated = Date.now().toString();
     }
 

diff --git a/demo/index.html b/demo/index.html
@@ -239,14 +239,21 @@
       height: 30px;
       margin: 5px 0;
     }
+    .loading {
+      position: absolute;
+      top: 30%;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: .8em;
+    }
   </style>
 
   <link rel="stylesheet" href="assets/icons.css">
   <script src="https://buttons.github.io/buttons.js"></script>
 </head>
 
 <body>
-  <app>Loading...</app>
+  <app><span class="loading">Loading...</span></app>
   <div class="github-button-wrap">
     <a class="github-button" href="https://github.com/swimlane/angular2-data-table" data-style="mega" data-count-href="/swimlane/angular2-data-table/stargazers" data-count-api="/repos/swimlane/angular2-data-table#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star swimlane/angular2-data-table on GitHub">Star</a>
   </div>

diff --git 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,16 +659,18 @@ 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[];
   private _count: number = 0;
   private _columnTemplates: QueryList<DataTableColumnDirective>;
   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();
   }