feat(module:table): support nzVirtualForTrackBy

NG-ZORRO · Jun 27, 2019 · cb14096 · cb14096
1 parent 79b02ca
commit cb14096
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 4 deletions.
diff --git a/components/table/demo/virtual.ts b/components/table/demo/virtual.ts
@@ -3,6 +3,13 @@ import { NzTableComponent } from 'ng-zorro-antd';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
+export interface VirtualDataInterface {
+  index: number;
+  name: string;
+  age: number;
+  address: string;
+}
+
 @Component({
   selector: 'nz-demo-table-virtual',
   template: `
@@ -14,6 +21,7 @@ import { takeUntil } from 'rxjs/operators';
       nzVirtualScroll
       [nzVirtualItemSize]="54"
       [nzData]="listOfData"
+      [nzVirtualForTrackBy]="trackByIndex"
       [nzFrontPagination]="false"
       [nzShowPagination]="false"
       [nzScroll]="{ x: '1300px', y: '240px' }"
@@ -60,27 +68,33 @@ import { takeUntil } from 'rxjs/operators';
 export class NzDemoTableVirtualComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild('virtualTable', { static: false }) nzTableComponent: NzTableComponent;
   private destroy$ = new Subject();
-  listOfData: any[] = [];
+  listOfData: VirtualDataInterface[] = [];
 
   scrollToIndex(index: number): void {
     this.nzTableComponent.cdkVirtualScrollViewport.scrollToIndex(index);
   }
 
+  trackByIndex(_: number, data: VirtualDataInterface): number {
+    return data.index;
+  }
+
   ngOnInit(): void {
+    const data = [];
     for (let i = 0; i < 20000; i++) {
-      this.listOfData.push({
+      data.push({
         index: i,
         name: `Edward King`,
         age: 32,
         address: `London`
       });
     }
+    this.listOfData = data;
   }
 
   ngAfterViewInit(): void {
     this.nzTableComponent.cdkVirtualScrollViewport.scrolledIndexChange
       .pipe(takeUntil(this.destroy$))
-      .subscribe(data => {
+      .subscribe((data: number) => {
         console.log('scroll index to', data);
       });
   }

diff --git a/components/table/doc/index.en-US.md b/components/table/doc/index.en-US.md
@@ -96,6 +96,7 @@ The data passed to `[nzData]` will be export with [Template Context](https://ang
 | `[nzVirtualItemSize]` | The size of the items in the list, same as [cdk itemSize](https://material.angular.io/cdk/scrolling/api) | `number` | `0` |
 | `[nzVirtualMaxBufferPx]` | The number of pixels worth of buffer to render for when rendering new items, same as [cdk maxBufferPx](https://material.angular.io/cdk/scrolling/api) | `number` | `200` |
 | `[nzVirtualMinBufferPx]` | The minimum amount of buffer rendered beyond the viewport (in pixels),same as [cdk minBufferPx](https://material.angular.io/cdk/scrolling/api) | `number` | `100` |
+| `[nzVirtualForTrackBy]` | The TrackByFunction to use for tracking changes. | `TrackByFunction<T>` | - |
 | `(nzPageIndexChange)` | pageIndex change callback | `EventEmitter<number>` | - |
 | `(nzPageSizeChange)` | pageSize change callback | `EventEmitter<number>` | - |
 | `(nzCurrentPageDataChange)` | current pageData change callback | `EventEmitter<any[]>` | - |

diff --git a/components/table/doc/index.zh-CN.md b/components/table/doc/index.zh-CN.md
@@ -96,6 +96,7 @@ Table 组件同时具备了易用性和高度可定制性
 | `[nzVirtualItemSize]` | 虚拟滚动时每一列的高度，与 [cdk itemSize](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `0` |
 | `[nzVirtualMaxBufferPx]` | 缓冲区最大像素高度，与 [cdk maxBufferPx](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `200` |
 | `[nzVirtualMinBufferPx]` | 缓冲区最小像素高度，低于该值时将加载新结构，与 [cdk minBufferPx](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `100` |
+| `[nzVirtualForTrackBy]` | 虚拟滚动数据 `TrackByFunction` 函数 | `TrackByFunction<T>` | - |
 | `(nzPageIndexChange)` | 当前页码改变时的回调函数 | `EventEmitter<number>` | - |
 | `(nzPageSizeChange)` | 页数改变时的回调函数 | `EventEmitter<number>` | - |
 | `(nzCurrentPageDataChange)` | 当前页面展示数据改变的回调函数 | `EventEmitter<any[]>` | - |

diff --git a/components/table/nz-table.component.html b/components/table/nz-table.component.html
@@ -48,7 +48,7 @@
       <table [class.ant-table-fixed]="nzScroll.x" [style.width]="nzScroll.x">
         <ng-template [ngIf]="nzVirtualScroll" [ngTemplateOutlet]="headerTemplate"></ng-template>
         <tbody>
-          <ng-container *cdkVirtualFor="let item of data; let i = index">
+          <ng-container *cdkVirtualFor="let item of data; let i = index; trackBy:nzVirtualForTrackBy;">
             <ng-template [ngTemplateOutlet]="nzVirtualScrollDirective?.templateRef" [ngTemplateOutletContext]="{$implicit:item, index:i}"></ng-template>
           </ng-container>
         </tbody>

diff --git a/components/table/nz-table.component.ts b/components/table/nz-table.component.ts
@@ -28,6 +28,7 @@ import {
   Renderer2,
   SimpleChanges,
   TemplateRef,
+  TrackByFunction,
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
@@ -87,6 +88,7 @@ export class NzTableComponent<T = any> implements OnInit, AfterViewInit, OnDestr
   @Input() @InputNumber() nzVirtualItemSize = 0;
   @Input() @InputNumber() nzVirtualMaxBufferPx = 200;
   @Input() @InputNumber() nzVirtualMinBufferPx = 100;
+  @Input() nzVirtualForTrackBy: TrackByFunction<T> | undefined;
   @Input() nzLoadingDelay = 0;
   @Input() nzLoadingIndicator: TemplateRef<void>;
   @Input() nzTotal = 0;