Fixed #4361

primefaces · Nov 6, 2017 · 9814130 · 9814130
1 parent 18bc9b5
commit 9814130
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 9 deletions.
diff --git a/src/app/components/datascroller/datascroller.ts b/src/app/components/datascroller/datascroller.ts
@@ -1,4 +1,4 @@
-import {NgModule,Component,ElementRef,AfterViewInit,AfterContentInit,OnDestroy,Input,Output,Renderer2,ViewChild,EventEmitter,ContentChild,ContentChildren,QueryList,TemplateRef} from '@angular/core';
+import {NgModule,Component,ElementRef,AfterViewInit,AfterContentInit,DoCheck,OnDestroy,Input,Output,Renderer2,ViewChild,EventEmitter,ContentChild,ContentChildren,QueryList,TemplateRef,IterableDiffers} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {Header,Footer,PrimeTemplate,SharedModule} from '../common/shared';
 import {DomHandler} from '../dom/domhandler';
@@ -12,7 +12,7 @@ import {DomHandler} from '../dom/domhandler';
         </div>
         <div #content class="ui-datascroller-content ui-widget-content" [ngStyle]="{'max-height': scrollHeight}">
             <ul class="ui-datascroller-list">
-                <li *ngFor="let item of dataToRender">
+                <li *ngFor="let item of dataToRender;trackBy: trackBy">
                     <ng-template [pTemplateWrapper]="itemTemplate" [item]="item"></ng-template>
                 </li>
             </ul>
@@ -24,7 +24,7 @@ import {DomHandler} from '../dom/domhandler';
     `,
     providers: [DomHandler]
 })
-export class DataScroller implements AfterViewInit,OnDestroy {
+export class DataScroller implements AfterViewInit,DoCheck,OnDestroy {
 
     @Input() rows: number;
 
@@ -44,6 +44,10 @@ export class DataScroller implements AfterViewInit,OnDestroy {
 
     @Input() loader: any;
 
+    @Input() trackBy: Function = (index: number, item: any) => item;
+
+    @Input() immutable: boolean = true;
+
     @ViewChild('content') contentViewChild: ElementRef;
 
     @ContentChild(Header) header;
@@ -64,7 +68,11 @@ export class DataScroller implements AfterViewInit,OnDestroy {
 
     contentElement: HTMLDivElement;
 
-    constructor(public el: ElementRef, public renderer: Renderer2, public domHandler: DomHandler) {}
+    differ: any;
+
+    constructor(public el: ElementRef, public renderer: Renderer2, public domHandler: DomHandler, public differs: IterableDiffers) {
+        this.differ = differs.find([]).create(null);
+    }
 
     ngAfterViewInit() {
         if(this.lazy) {
@@ -101,7 +109,10 @@ export class DataScroller implements AfterViewInit,OnDestroy {
 
     set value(val:any[]) {
         this._value = val;
-        this.handleDataChange();
+
+        if(this.immutable) {
+            this.handleDataChange();
+        }
     }
 
     handleDataChange() {
@@ -110,6 +121,15 @@ export class DataScroller implements AfterViewInit,OnDestroy {
         else
             this.load();
     }
+
+    ngDoCheck() {
+        if(!this.immutable) {
+            let changes = this.differ.diff(this.value);
+            if(changes) {
+                this.handleDataChange();
+            }
+        }
+    }
 
     load() {
         if(this.lazy) {

diff --git a/src/app/showcase/components/datascroller/datascrollerdemo.html b/src/app/showcase/components/datascroller/datascrollerdemo.html
@@ -8,6 +8,7 @@
 </div>
 
 <div class="content-section implementation">
+    <button pButton label="Check" (click)="addCar()"></button>
     <p-dataScroller [value]="cars" [rows]="10" [buffer]="0.4">
         <p-header>
             Scroll Down to to Load More
@@ -143,10 +144,14 @@ <h3>Getting Started</h3>
 </code>
 </pre>
 
-            <h3>Managing Data</h3>
-            <p>DataTable uses setter based checking to realize if the underlying data has changed to update the UI so your data changes such as adding or removing a record 
-                should always create a new array reference instead of manipulating an existing array. For example, use slice instead of splice when removing an item 
-                or use spread operator instead of push method when adding an item.</p>
+            <h3>Change Detection</h3>
+            <p>DataScroller either uses setter based checking or ngDoCheck to realize if the underlying data has changed to update the UI. This is configured using the immutable
+                property, when enabled (default) setter based detection is utilized so your data changes such as adding or removing a record 
+                should always create a new array reference instead of manipulating an existing array as Angular does not trigger setters if the reference does not change. 
+                For example, use slice instead of splice when removing an item or use spread operator instead of push method when adding an item. On the other hand, setting immutable property to false removes
+                this restriction by using ngDoCheck with IterableDiffers to listen changes without the need to create a new reference of data. Setter based method is faster however
+                both methods can be used depending on your preference.
+            </p>
 
             <h3>Facets</h3>
             <p>Header and Footer are the two sections aka facets that are capable of displaying custom content.</p>
@@ -259,6 +264,18 @@ <h3>Properties</h3>
                             <td>null</td>
                             <td>Style class of the component.</td>
                         </tr>
+                        <tr>
+                            <td>trackBy</td>
+                            <td>Function</td>
+                            <td>null</td>
+                            <td>Function to optimize the dom operations by delegating to ngForTrackBy, default algoritm checks for object identity.</td>
+                        </tr>
+                        <tr>
+                            <td>immutable</td>
+                            <td>boolean</td>
+                            <td>true</td>
+                            <td>Defines how the data should be manipulated.</td>
+                        </tr>
                     </tbody>
                 </table>
             </div>