fix(module:select): fix select nzCustomContent render (#5425)

close #5178
NG-ZORRO · Jun 15, 2020 · f99d7ff · f99d7ff
1 parent 6e0f47b
commit f99d7ff
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/components/select/option-container.component.ts b/components/select/option-container.component.ts
@@ -35,12 +35,18 @@ import { NzSelectItemInterface, NzSelectModeType } from './select.types';
         [class.full-width]="!matchWidth"
         [itemSize]="itemSize"
         [maxBufferPx]="itemSize * maxItemLength"
-        [minBufferPx]="itemSize * maxItemLength"
+        [minBufferPx]="itemSize"
         (scrolledIndexChange)="onScrolledIndexChange($event)"
         [style.height.px]="listOfContainerItem.length * itemSize"
         [style.max-height.px]="itemSize * maxItemLength"
       >
-        <ng-container *cdkVirtualFor="let item of listOfContainerItem; trackBy: trackValue">
+        <ng-template
+          cdkVirtualFor
+          [cdkVirtualForOf]="listOfContainerItem"
+          [cdkVirtualForTrackBy]="trackValue"
+          [cdkVirtualForTemplateCacheSize]="0"
+          let-item
+        >
           <ng-container [ngSwitch]="item.type">
             <nz-option-item-group *ngSwitchCase="'group'" [nzLabel]="item.groupLabel"></nz-option-item-group>
             <nz-option-item
@@ -60,7 +66,7 @@ import { NzSelectItemInterface, NzSelectModeType } from './select.types';
               (itemClick)="onItemClick($event)"
             ></nz-option-item>
           </ng-container>
-        </ng-container>
+        </ng-template>
       </cdk-virtual-scroll-viewport>
       <ng-template [ngTemplateOutlet]="dropdownRender"></ng-template>
     </div>

diff --git a/components/select/option-item.component.ts b/components/select/option-item.component.ts
@@ -20,7 +20,10 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types';
   selector: 'nz-option-item',
   template: `
     <div class="ant-select-item-option-content">
-      <ng-container *ngIf="!customContent; else template">{{ label }}</ng-container>
+      <ng-container *ngIf="!customContent">{{ label }}</ng-container>
+      <ng-container *ngIf="customContent">
+        <ng-template [ngTemplateOutlet]="template"></ng-template>
+      </ng-container>
     </div>
     <div *ngIf="showState && selected" class="ant-select-item-option-state" style="user-select: none" unselectable="on">
       <i nz-icon nzType="check" class="ant-select-selected-icon" *ngIf="!icon; else icon"></i>