From cbbed07df79f2a01ceda4c6a0798438fcf0c1562 Mon Sep 17 00:00:00 2001
From: cipchk <cipchk@qq.com>
Date: Wed, 9 Dec 2020 19:30:50 +0800
Subject: [PATCH 1/2] chore(module:transfer): fix demo

- close #5641
---
 components/transfer/demo/table-transfer.ts | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/components/transfer/demo/table-transfer.ts b/components/transfer/demo/table-transfer.ts
index 73517261da7..4eab7ebb4ca 100644
--- a/components/transfer/demo/table-transfer.ts
+++ b/components/transfer/demo/table-transfer.ts
@@ -37,14 +37,16 @@ import { TransferChange, TransferItem, TransferSelectChange } from 'ng-zorro-ant
             </tr>
           </thead>
           <tbody>
-            <tr *ngFor="let data of t.data" (click)="onItemSelect(data)">
-              <td [nzChecked]="data.checked" [nzDisabled]="disabled || data.disabled" (nzCheckedChange)="onItemSelect(data)"></td>
-              <td>{{ data.title }}</td>
-              <td *ngIf="direction === 'left'">
-                <nz-tag>{{ data.tag }}</nz-tag>
-              </td>
-              <td>{{ data.description }}</td>
-            </tr>
+            <ng-container *ngFor="let data of t.data">
+              <tr *ngIf="!data.hide" (click)="onItemSelect(data)">
+                <td [nzChecked]="data.checked || false" (nzCheckedChange)="onItemSelect(data)"></td>
+                <td>{{ data.title }}</td>
+                <td *ngIf="direction === 'left'">
+                  <nz-tag>{{ data.tag }}</nz-tag>
+                </td>
+                <td>{{ data.description }}</td>
+              </tr>
+            </ng-container>
           </tbody>
         </nz-table>
       </ng-template>

From aab0866170c38b972843fd950de9861750491207 Mon Sep 17 00:00:00 2001
From: cipchk <cipchk@qq.com>
Date: Thu, 10 Dec 2020 19:09:21 +0800
Subject: [PATCH 2/2] chore: fix demo

---
 components/transfer/demo/table-transfer.ts    | 18 ++++----
 components/transfer/demo/tree-transfer.ts     |  6 +--
 .../transfer/transfer-list.component.ts       | 46 ++++++++++---------
 3 files changed, 35 insertions(+), 35 deletions(-)

diff --git a/components/transfer/demo/table-transfer.ts b/components/transfer/demo/table-transfer.ts
index 4eab7ebb4ca..73517261da7 100644
--- a/components/transfer/demo/table-transfer.ts
+++ b/components/transfer/demo/table-transfer.ts
@@ -37,16 +37,14 @@ import { TransferChange, TransferItem, TransferSelectChange } from 'ng-zorro-ant
             </tr>
           </thead>
           <tbody>
-            <ng-container *ngFor="let data of t.data">
-              <tr *ngIf="!data.hide" (click)="onItemSelect(data)">
-                <td [nzChecked]="data.checked || false" (nzCheckedChange)="onItemSelect(data)"></td>
-                <td>{{ data.title }}</td>
-                <td *ngIf="direction === 'left'">
-                  <nz-tag>{{ data.tag }}</nz-tag>
-                </td>
-                <td>{{ data.description }}</td>
-              </tr>
-            </ng-container>
+            <tr *ngFor="let data of t.data" (click)="onItemSelect(data)">
+              <td [nzChecked]="data.checked" [nzDisabled]="disabled || data.disabled" (nzCheckedChange)="onItemSelect(data)"></td>
+              <td>{{ data.title }}</td>
+              <td *ngIf="direction === 'left'">
+                <nz-tag>{{ data.tag }}</nz-tag>
+              </td>
+              <td>{{ data.description }}</td>
+            </tr>
           </tbody>
         </nz-table>
       </ng-template>
diff --git a/components/transfer/demo/tree-transfer.ts b/components/transfer/demo/tree-transfer.ts
index ed91f0453aa..a31310d2dfd 100644
--- a/components/transfer/demo/tree-transfer.ts
+++ b/components/transfer/demo/tree-transfer.ts
@@ -18,9 +18,9 @@ import { NzTreeComponent } from 'ng-zorro-antd/tree';
             >
               <span class="ant-tree-checkbox-inner"></span>
             </span>
-            <span (click)="checkBoxChange(node, onItemSelect)" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open">{{
-              node.title
-            }}</span>
+            <span (click)="checkBoxChange(node, onItemSelect)" class="ant-tree-node-content-wrapper ant-tree-node-content-wrapper-open">
+              {{ node.title }}
+            </span>
           </ng-template>
         </nz-tree>
       </ng-template>
diff --git a/components/transfer/transfer-list.component.ts b/components/transfer/transfer-list.component.ts
index 5522ce71d8b..3d39300847a 100644
--- a/components/transfer/transfer-list.component.ts
+++ b/components/transfer/transfer-list.component.ts
@@ -24,25 +24,23 @@ import { TransferDirection, TransferItem } from './interface';
   template: `
     <ng-template #defaultRenderList>
       <ul *ngIf="stat.shownCount > 0" class="ant-transfer-list-content">
-        <div class="LazyLoad" *ngFor="let item of dataSource">
-          <li
-            *ngIf="!item.hide"
-            (click)="onItemSelect(item)"
-            class="ant-transfer-list-content-item"
-            [ngClass]="{ 'ant-transfer-list-content-item-disabled': disabled || item.disabled }"
+        <li
+          *ngFor="let item of validData"
+          (click)="onItemSelect(item)"
+          class="ant-transfer-list-content-item"
+          [ngClass]="{ 'ant-transfer-list-content-item-disabled': disabled || item.disabled }"
+        >
+          <label
+            nz-checkbox
+            [nzChecked]="item.checked"
+            (nzCheckedChange)="onItemSelect(item)"
+            (click)="$event.stopPropagation()"
+            [nzDisabled]="disabled || item.disabled"
           >
-            <label
-              nz-checkbox
-              [nzChecked]="item.checked"
-              (nzCheckedChange)="onItemSelect(item)"
-              (click)="$event.stopPropagation()"
-              [nzDisabled]="disabled || item.disabled"
-            >
-              <ng-container *ngIf="!render; else renderContainer">{{ item.title }}</ng-container>
-              <ng-template #renderContainer [ngTemplateOutlet]="render" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
-            </label>
-          </li>
-        </div>
+            <ng-container *ngIf="!render; else renderContainer">{{ item.title }}</ng-container>
+            <ng-template #renderContainer [ngTemplateOutlet]="render" [ngTemplateOutletContext]="{ $implicit: item }"></ng-template>
+          </label>
+        </li>
       </ul>
       <div *ngIf="stat.shownCount === 0" class="ant-transfer-list-body-not-found">
         <nz-embed-empty [nzComponentName]="'transfer'" [specificContent]="notFoundContent"></nz-embed-empty>
@@ -59,7 +57,7 @@ import { TransferDirection, TransferItem } from './interface';
       ></label>
       <span class="ant-transfer-list-header-selected">
         <span>
-          {{ (stat.checkCount > 0 ? stat.checkCount + '/' : '') + stat.shownCount }} {{ dataSource.length > 1 ? itemsUnit : itemUnit }}
+          {{ (stat.checkCount > 0 ? stat.checkCount + '/' : '') + stat.shownCount }} {{ validData.length > 1 ? itemsUnit : itemUnit }}
         </span>
         <span *ngIf="titleText" class="ant-transfer-list-header-title">{{ titleText }}</span>
       </span>
@@ -84,7 +82,7 @@ import { TransferDirection, TransferItem } from './interface';
             *ngTemplateOutlet="
               renderList;
               context: {
-                $implicit: dataSource,
+                $implicit: validData,
                 direction: direction,
                 disabled: disabled,
                 onItemSelectAll: onItemSelectAll,
@@ -140,6 +138,10 @@ export class NzTransferListComponent {
     shownCount: 0
   };
 
+  get validData(): TransferItem[] {
+    return this.dataSource.filter(w => !w.hide);
+  }
+
   onItemSelect = (item: TransferItem) => {
     if (this.disabled || item.disabled) {
       return;
@@ -163,7 +165,7 @@ export class NzTransferListComponent {
   private updateCheckStatus(): void {
     const validCount = this.dataSource.filter(w => !w.disabled).length;
     this.stat.checkCount = this.dataSource.filter(w => w.checked && !w.disabled).length;
-    this.stat.shownCount = this.dataSource.filter(w => !w.hide).length;
+    this.stat.shownCount = this.validData.length;
     this.stat.checkAll = validCount > 0 && validCount === this.stat.checkCount;
     this.stat.checkHalf = this.stat.checkCount > 0 && !this.stat.checkAll;
   }
@@ -177,7 +179,7 @@ export class NzTransferListComponent {
     this.dataSource.forEach(item => {
       item.hide = value.length > 0 && !this.matchFilter(value, item);
     });
-    this.stat.shownCount = this.dataSource.filter(w => !w.hide).length;
+    this.stat.shownCount = this.validData.length;
     this.filterChange.emit({ direction: this.direction, value });
   }