fix(module:datepicker): ng0956 recreation entire collection (#8658)

Author: Nicoss54

components/date-picker/lib/abstract-panel-header.html

@@ -23,7 +23,7 @@
   </button>
 
   <div class="{{ prefixCls }}-view">
-    @for(selector of selectors; track selector) {
+    @for (selector of selectors; track trackBySelector(selector)) {
       <button
         class="{{ selector.className }}"
         role="button"

components/date-picker/lib/abstract-panel-header.ts

@@ -3,7 +3,16 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { Directive, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, booleanAttribute } from '@angular/core';
+import {
+  booleanAttribute,
+  Directive,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges
+} from '@angular/core';
 
 import { CandyDate } from 'ng-zorro-antd/core/time';
 import { NzCalendarI18nInterface } from 'ng-zorro-antd/i18n';
@@ -19,10 +28,10 @@ export abstract class AbstractPanelHeader implements OnInit, OnChanges {
 
   @Input() value!: CandyDate;
   @Input() locale!: NzCalendarI18nInterface;
-  @Input({ transform: booleanAttribute }) showSuperPreBtn: boolean = true;
-  @Input({ transform: booleanAttribute }) showSuperNextBtn: boolean = true;
-  @Input({ transform: booleanAttribute }) showPreBtn: boolean = true;
-  @Input({ transform: booleanAttribute }) showNextBtn: boolean = true;
+  @Input({transform: booleanAttribute}) showSuperPreBtn: boolean = true;
+  @Input({transform: booleanAttribute}) showSuperNextBtn: boolean = true;
+  @Input({transform: booleanAttribute}) showPreBtn: boolean = true;
+  @Input({transform: booleanAttribute}) showNextBtn: boolean = true;
 
   @Output() readonly panelModeChange = new EventEmitter<NzDateMode>();
   @Output() readonly valueChange = new EventEmitter<CandyDate>();
@@ -91,4 +100,8 @@ export abstract class AbstractPanelHeader implements OnInit, OnChanges {
       this.render();
     }
   }
-}
+
+  trackBySelector(selector: PanelSelector): string {
+    return `${selector.title}-${selector.label}`;
+  }
+}

components/date-picker/lib/abstract-table.html

@@ -1,24 +1,24 @@
 <table class="ant-picker-content" cellspacing="0" role="grid">
-  @if(headRow && headRow.length > 0) {
+  @if (headRow && headRow.length > 0) {
     <thead>
       <tr role="row">
-        @if(showWeek) {
+        @if (showWeek) {
           <th role="columnheader"></th>
         }
-        @for(cell of headRow; track cell) {
-          <th role="columnheader" title="{{ cell.title }}"> {{ cell.content }} </th>
+        @for (cell of headRow; track $index) {
+          <th role="columnheader" title="{{ cell.title }}"> {{ cell.content }}</th>
         }
       </tr>
     </thead>
   }
 
   <tbody>
-    @for(row of bodyRows; track row.trackByIndex) {
+    @for (row of bodyRows; track row.trackByIndex) {
       <tr [ngClass]="row.classMap!" role="row">
-        @if(row.weekNum) {
-          <td role="gridcell" class="{{ prefixCls }}-cell-week"> {{ row.weekNum }} </td>
+        @if (row.weekNum) {
+          <td role="gridcell" class="{{ prefixCls }}-cell-week"> {{ row.weekNum }}</td>
         }
-        @for(cell of row.dateCells; track cell.trackByIndex) {
+        @for (cell of row.dateCells; track cell.trackByIndex) {
           <td
             title="{{ cell.title }}"
             role="gridcell"
@@ -27,12 +27,12 @@
             (mouseenter)="cell.onMouseEnter()"
           >
             @switch (prefixCls) {
-              @case('ant-picker') {
-                @if(cell.isTemplateRef) {
+              @case ('ant-picker') {
+                @if (cell.isTemplateRef) {
                   <ng-container *ngTemplateOutlet="$any(cell.cellRender); context: { $implicit: cell.value }" />
-                }@else if(cell.isNonEmptyString) {
+                } @else if (cell.isNonEmptyString) {
                   <span [innerHTML]="cell.cellRender"></span>
-                }@else {
+                } @else {
                   <div
                     class="{{ prefixCls }}-cell-inner"
                     [attr.aria-selected]="cell.isSelected"
@@ -42,14 +42,14 @@
                   </div>
                 }
               }
-              @case('ant-picker-calendar') {
+              @case ('ant-picker-calendar') {
                 <div
                   class="{{ prefixCls }}-date ant-picker-cell-inner"
                   [class.ant-picker-calendar-date-today]="cell.isToday"
                 >
-                  @if(cell.fullCellRender) {
+                  @if (cell.fullCellRender) {
                     <ng-container *ngTemplateOutlet="$any(cell.fullCellRender); context: { $implicit: cell.value }" />
-                  }@else() {
+                  } @else {
                     <div class="{{ prefixCls }}-date-value">{{ cell.content }}</div>
                     <div class="{{ prefixCls }}-date-content">
                       <ng-container *ngTemplateOutlet="$any(cell.cellRender); context: { $implicit: cell.value }">