perf(module:select): ability to pass nzKey to nz-option (#8033)

When object is used as key for select option re-rendering occurs, to solve this added new 'key' param | 'nzKey' Input

Author: Oleksandr Saulyak

components/select/doc/index.en-US.md

@@ -59,7 +59,7 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
 | `[nzTokenSeparators]` | Separator used to tokenize on tag/multiple mode | `string[]` | `[]` |
 | `[nzLoading]` | indicate loading state | `boolean` | false |
 | `[nzMaxTagCount]` | Max tag count to show| `number` | - |
-| `[nzOptions]` | use nzOptions or `nz-option` to pass options to the select  | `Array<{ label: string  \| number \| TemplateRef<any>; value: any; disabled?: boolean; hide?: boolean; groupLabel?: string \| TemplateRef<any>;}>` | - |
+| `[nzOptions]` | use nzOptions or `nz-option` to pass options to the select  | `Array<{ label: string  \| number \| TemplateRef<any>; value: any; key?: string \| number; disabled?: boolean; hide?: boolean; groupLabel?: string \| TemplateRef<any>;}>` | - |
 | `[nzMaxTagPlaceholder]` | Placeholder for not showing tags | `TemplateRef<{ $implicit: any[] }>` | - |
 | `[nzOptionHeightPx]` | Each option height inside the dropdown | `number` | `32` |
 | `[nzOptionOverflowSize]` | Max option size inside the dropdown, overflow when exceed the size | `number` | `8` |
@@ -78,6 +78,7 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
 | `[nzDisabled]` | Disable this option | `boolean` | `false` |
 | `[nzLabel]` | The text show in nz-select and dropdown menu | `string  \| number` | - |
 | `[nzValue]` | The value passed to ngModel of nz-select | `any ` | - |
+| `[nzKey]` | Should be passed when typeof nzValue - Object. Key will be used for performance optimizations | `string \| number ` | - |
 | `[nzHide]` | Whether hide the option in the option list | `boolean` | `false` |
 | `[nzCustomContent]` | Whether custom nz-option content in drodown menu, the ng-content in nz-option will replace nzLabel when it was set to true | `boolean` | `false` |
 

components/select/doc/index.zh-CN.md

@@ -61,7 +61,7 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
 | `[nzLoading]` | 加载中状态 | `boolean` | `false` |
 | `[nzMaxTagCount]` | 最多显示多少个 tag | `number` | - |
 | `[nzMaxTagPlaceholder]` | 隐藏 tag 时显示的内容 | `TemplateRef<{ $implicit: any[] }>` | - |
-| `[nzOptions]` | option 列表，可以取代 nz-option，用法参见例子 | `Array<{ label: string  \| number \| TemplateRef<any>; value: any; disabled?: boolean; hide?: boolean; groupLabel?: string \| TemplateRef<any>;}>` | - |
+| `[nzOptions]` | option 列表，可以取代 nz-option，用法参见例子 | `Array<{ label: string  \| number \| TemplateRef<any>; value: any; key?: string \| number; disabled?: boolean; hide?: boolean; groupLabel?: string \| TemplateRef<any>;}>` | - |
 | `[nzOptionHeightPx]` | 下拉菜单中每个 Option 的高度 | `number` | `32` |
 | `[nzOptionOverflowSize]` | 下拉菜单中最多展示的 Option 个数，超出部分滚动 | `number` | `8` |
 | `[nzSelectOnTab]` | 允许使用 TAB 键选择项目 | `boolean` | `false` |
@@ -79,6 +79,7 @@ import { NzSelectModule } from 'ng-zorro-antd/select';
 | `[nzDisabled]` | 是否禁用 | `boolean` | `false` |
 | `[nzLabel]` | 选中该 nz-option 后，nz-select 中显示的文字 | `string  \| number` | - |
 | `[nzValue]` | nz-select 中 ngModel 的值 | `any` | - |
+| `[nzKey]` | nz-select 中 ngModel 的值 | `string \| number` | - |
 | `[nzHide]` | 是否在选项列表中隐藏该选项 | `boolean` | `false` |
 | `[nzCustomContent]` | 是否自定义在下拉菜单中的 Template 内容，当为 true 时，nz-option 包裹的内容将直接渲染在下拉菜单中 | `boolean` | `false` |
 

components/select/option.component.ts

@@ -45,6 +45,7 @@ export class NzOptionComponent implements OnChanges, OnInit {
   @ViewChild(TemplateRef, { static: true }) template!: TemplateRef<NzSafeAny>;
   @Input() nzLabel: string | number | null = null;
   @Input() nzValue: NzSafeAny | null = null;
+  @Input() nzKey?: string | number;
   @Input() @InputBoolean() nzDisabled = false;
   @Input() @InputBoolean() nzHide = false;
   @Input() @InputBoolean() nzCustomContent = false;

components/select/select.component.ts

@@ -630,7 +630,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon
           nzCustomContent: item.label instanceof TemplateRef,
           groupLabel: item.groupLabel || null,
           type: 'item',
-          key: item.value
+          key: item.key === undefined ? item.value : item.key
         };
       });
       this.listOfTemplateItem$.next(listOfTransformedItem);
@@ -757,7 +757,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon
         )
         .subscribe(() => {
           const listOfOptionInterface = this.listOfNzOptionComponent.toArray().map(item => {
-            const { template, nzLabel, nzValue, nzDisabled, nzHide, nzCustomContent, groupLabel } = item;
+            const { template, nzLabel, nzValue, nzKey, nzDisabled, nzHide, nzCustomContent, groupLabel } = item;
             return {
               template,
               nzLabel,
@@ -767,7 +767,7 @@ export class NzSelectComponent implements ControlValueAccessor, OnInit, AfterCon
               nzCustomContent,
               groupLabel,
               type: 'item',
-              key: nzValue
+              key: nzKey === undefined ? nzValue : nzKey
             };
           });
           this.listOfTemplateItem$.next(listOfOptionInterface);

components/select/select.types.ts

@@ -26,6 +26,7 @@ export interface NzSelectOptionInterface {
   disabled?: boolean;
   hide?: boolean;
   groupLabel?: string | number | TemplateRef<NzSafeAny> | null;
+  key?: string | number;
 }
 
 export type NzSelectTopControlItemType = Partial<NzSelectItemInterface> & {