feat(module:*): *ngFor add trackBy

lib/ng-nest/ui/calendar/calendar.component.html

@@ -30,7 +30,7 @@
     <span [title]="date | date: 'yyyy-MM-dd'">{{ date | date: 'd' }}</span>
     <div class="x-calendar-date-content">
       <ul *ngIf="getDate(date)">
-        <li *ngFor="let item of getDate(date)">
+        <li *ngFor="let item of getDate(date); trackBy: trackByDate">
           <span [title]="item.id + item.label">{{ item.id }}{{ item.label }}</span>
         </li>
       </ul>
@@ -43,7 +43,7 @@
     <span [title]="date | date: 'yyyy-MM'">{{ getLocaleMonth(date) }}</span>
     <div class="x-calendar-month-content">
       <ul *ngIf="getMonth(date)">
-        <li *ngFor="let item of getMonth(date)">
+        <li *ngFor="let item of getMonth(date); trackBy: trackByMonth">
           <x-link x-tooltip [content]="item.label" placement="top">{{ item.id }}</x-link>
         </li>
       </ul>

lib/ng-nest/ui/calendar/calendar.component.ts

@@ -135,4 +135,12 @@ export class XCalendarComponent extends XCalendarProperty implements OnChanges,
   getMonth(date: Date): XCalendarNode[] {
     return this.monthData?.[this.datePipe.transform(date, 'yyyy-MM') as string];
   }
+
+  trackByDate(index: number, item: XCalendarNode) {
+    return `${item.id}-${item.label}`;
+  }
+
+  trackByMonth(index: number, item: XCalendarNode) {
+    return item.id;
+  }
 }

lib/ng-nest/ui/carousel/carousel.component.html

@@ -8,7 +8,7 @@
   </div>
   <ul class="x-carousel-indicator" [class.x-carousel-indicator-outside]="outside || card">
     <li
-      *ngFor="let panel of panelChanges; let i = index"
+      *ngFor="let panel of panelChanges; let i = index; trackBy: trackByPanel"
       [class.x-activated]="getActivated(i)"
       (click)="action(i, 0, 'click')"
       (mouseenter)="action(i, 0, 'hover')"

lib/ng-nest/ui/carousel/carousel.component.ts

@@ -98,4 +98,8 @@ export class XCarouselComponent extends XCarouselProperty implements OnInit, OnC
   getActivated(index: number) {
     return Number(this.active) === index;
   }
+
+  trackByPanel(index: number, item: any) {
+    return index;
+  }
 }

lib/ng-nest/ui/checkbox/checkbox.component.html

@@ -10,7 +10,7 @@
   <ng-container *ngIf="button || icon; else default">
     <x-buttons>
       <x-button
-        *ngFor="let item of nodes"
+        *ngFor="let item of nodes; trackBy: trackByItem"
         [icon]="item.icon"
         [title]="item.title"
         [size]="size"
@@ -27,7 +27,7 @@
   <div class="x-checkbox-row">
     <div
       class="x-checkbox-item"
-      *ngFor="let item of nodes"
+      *ngFor="let item of nodes; trackBy: trackByItem"
       [class.x-checked]="getChecked(item.id)"
       [class.x-disabled]="disabled || item.disabled"
       [class.x-indeterminate]="indeterminate"

lib/ng-nest/ui/checkbox/checkbox.component.ts

@@ -91,6 +91,10 @@ export class XCheckboxComponent extends XCheckboxProperty implements OnChanges {
     });
   }
 
+  trackByItem(index: number, item: XCheckboxNode) {
+    return item.id;
+  }
+
   formControlChanges() {
     this.setData();
     this.ngOnInit();

lib/ng-nest/ui/color/color.component.html

@@ -4,6 +4,6 @@
     <span class="x-color-hex">{{ hex }}</span>
   </div>
   <div class="x-color-gradual">
-    <div class="x-color-item" *ngFor="let color of colors; index as i" [style.background-color]="color"></div>
+    <div class="x-color-item" *ngFor="let color of colors; index as i; trackBy: trackByColor" [style.background-color]="color"></div>
   </div>
 </div>

lib/ng-nest/ui/color/color.component.ts

@@ -35,4 +35,8 @@ export class XColorComponent extends XColorProperty implements OnInit {
     }
     this.colors = colors;
   }
+
+  trackByColor(index: number, item: string) {
+    return item;
+  }
 }

lib/ng-nest/ui/comment/comment.component.html

@@ -1,6 +1,6 @@
 <div #comment class="x-comment">
   <div class="x-comment-list">
-    <div class="x-comment-item" *ngFor="let node of nodes">
+    <div class="x-comment-item" *ngFor="let node of nodes; trackBy: trackByNode">
       <div class="x-comment-avatar">
         <x-avatar [src]="node.src"></x-avatar>
       </div>
@@ -24,7 +24,7 @@
         </div>
         <x-comment-reply *ngIf="node.commentShow" [maxlength]="contentMax" (sureClick)="sureOnClick($event, node)"></x-comment-reply>
         <ul>
-          <li *ngFor="let child of node.children">
+          <li *ngFor="let child of node.children; trackBy: trackByNode">
             <div>
               <p>
                 <x-link>{{ child.author }}</x-link>

lib/ng-nest/ui/comment/comment.component.ts

@@ -75,6 +75,10 @@ export class XCommentComponent extends XCommentProperty implements OnChanges {
     this.moreClick.emit(node);
   }
 
+  trackByNode(index: number, item: XCommentNode) {
+    return item.id;
+  }
+
   private setData() {
     XSetData<XCommentNode>(this.data, this._unSubject).subscribe((x) => {
       this.nodes = x.filter((y) => XIsEmpty(y.pid)).map((y) => XGetChildren<XCommentNode>(x, y, 0));

lib/ng-nest/ui/crumb/crumb.component.html

@@ -1,5 +1,5 @@
 <ul #crumbs class="x-crumb">
-  <li *ngFor="let node of nodes; index as i">
+  <li *ngFor="let node of nodes; index as i; trackBy: trackByNode">
     <x-link
       [title]="nodeTpl ? node.label : ''"
       [icon]="node.icon"

lib/ng-nest/ui/crumb/crumb.component.ts

@@ -46,6 +46,10 @@ export class XCrumbComponent extends XCrumbProperty implements OnChanges, OnDest
     }
   }
 
+  trackByNode(index: number, item: XCrumbNode) {
+    return item.id;
+  }
+
   private setData() {
     XSetData<XCrumbNode>(this.data, this._unSubject).subscribe((x) => {
       this.nodes = x;

lib/ng-nest/ui/date-picker/picker-date.component.html

@@ -2,12 +2,12 @@
   <table class="x-picker-date-table" cellspacing="0" cellpadding="0">
     <thead>
       <tr>
-        <th *ngFor="let title of titles">{{ title | xI18n }}</th>
+        <th *ngFor="let title of titles; trackBy: trackByNode">{{ title | xI18n }}</th>
       </tr>
     </thead>
     <tbody>
       <tr *ngFor="let weeks of dates">
-        <ng-container *ngFor="let week of weeks">
+        <ng-container *ngFor="let week of weeks; trackBy: trackByNode">
           <td
             [class.x-date-last-or-next]="(week | date: 'yyyyMM') !== (display | date: 'yyyyMM')"
             [class.x-date-now]="(week | date: 'yyyyMMdd') === (now | date: 'yyyyMMdd')"

lib/ng-nest/ui/date-picker/picker-date.component.ts

@@ -103,4 +103,8 @@ export class XPickerDateComponent extends XPickerDateProperty implements OnChang
     this.modelChange.emit(date);
     this.cdr.markForCheck();
   }
+
+  trackByNode(index: number, item: string | Date) {
+    return item;
+  }
 }

lib/ng-nest/ui/date-picker/picker-month.component.html

@@ -1,7 +1,7 @@
 <div class="x-picker-month" [class.x-date-picker-monthtemp]="monthTemp">
   <table class="x-picker-month-table" cellspacing="0" cellpadding="0">
     <tr *ngFor="let months of dates">
-      <ng-container *ngFor="let month of months">
+      <ng-container *ngFor="let month of months; trackBy: trackByMonth">
         <td
           [class.x-date-last-or-next]="(month | date: 'yyyy') !== (display | date: 'yyyy')"
           [class.x-date-now]="(month | date: 'yyyyMM') === (now | date: 'yyyyMM')"

lib/ng-nest/ui/date-picker/picker-month.component.ts

@@ -81,4 +81,8 @@ export class XPickerMonthComponent extends XPickerMonthProperty implements OnCha
   getLocaleMonth(date: Date) {
     return (this.locale as any)[this.lowerCasePipe.transform(this.datePipe.transform(date, 'LLLL') as string)];
   }
+
+  trackByMonth(index: number, item: Date) {
+    return item;
+  }
 }

lib/ng-nest/ui/date-picker/picker-year.component.html

@@ -1,7 +1,7 @@
 <div class="x-picker-year">
   <table class="x-picker-year-table" cellspacing="0" cellpadding="0">
     <tr *ngFor="let years of dates">
-      <ng-container *ngFor="let year of years">
+      <ng-container *ngFor="let year of years; trackBy: trackByYear">
         <td [class.x-date-last-or-next]="lastOrNext(year)" [class.x-date-now]="equalYear(year, now)">
           <x-button type="text" [activated]="equalYear(year, now)" (click)="yearClick(year)">{{ year | date: 'yyyy' }}</x-button>
         </td>

lib/ng-nest/ui/date-picker/picker-year.component.ts

@@ -63,4 +63,8 @@ export class XPickerYearComponent extends XPickerYearProperty implements OnChang
   equalYear(one: Date, two: Date) {
     return this.datePipe.transform(one, 'yyyy') === this.datePipe.transform(two, 'yyyy');
   }
+
+  trackByYear(index: number, item: Date) {
+    return item;
+  }
 }

lib/ng-nest/ui/find/find.component.html

@@ -12,7 +12,9 @@
     <x-button #buttonCom icon="fto-search" [disabled]="disabled" (click)="showModal()"></x-button>
     <div class="x-find-tags">
       <ng-container *ngIf="multiple; else singleTpl">
-        <x-tag *ngFor="let item of value; index as i" closable [disabled]="disabled" (close)="tagClose(i)">{{ item[columnLabel] }}</x-tag>
+        <x-tag *ngFor="let item of value; index as i; trackBy: trackByItem" closable [disabled]="disabled" (close)="tagClose(i)">{{
+          item[columnLabel]
+        }}</x-tag>
       </ng-container>
       <ng-template #singleTpl>
         <x-tag *ngIf="value" closable [disabled]="disabled" (close)="tagClose()">{{ value[columnLabel] }}</x-tag>
@@ -79,7 +81,7 @@
     <div *ngIf="multiple" class="x-find-dialog-checked" [class.x-find-empty]="getEmpty" [style.height.px]="height">
       <x-empty *ngIf="getEmpty" content="请选择数据"></x-empty>
       <div class="x-find-dialog-tags">
-        <x-tag *ngFor="let item of temp; index as i" closable (close)="tempClose(i, item)">
+        <x-tag *ngFor="let item of temp; index as i; trackBy: trackByItem" closable (close)="tempClose(i, item)">
           <span>{{ item[columnLabel] }}</span>
         </x-tag>
       </div>

lib/ng-nest/ui/find/find.component.ts

@@ -313,6 +313,10 @@ export class XFindComponent extends XFindProperty implements OnInit {
     this.treeMultiple(node);
   }
 
+  trackByItem(index: number, item: any) {
+    return item.id;
+  }
+
   formControlChanges() {
     this.ngOnInit();
     this.ngAfterViewInit();

lib/ng-nest/ui/form/form.component.html

@@ -30,7 +30,7 @@
     <x-col
       [style.padding-top.rem]="space"
       [span]="!control.span ? span : control.span"
-      *ngFor="let control of controls"
+      *ngFor="let control of controls; trackBy: trackByControl"
       [hidden]="control.hidden"
     >
       <x-control [option]="control"></x-control>

lib/ng-nest/ui/form/form.component.ts

@@ -95,4 +95,8 @@ export class XFormComponent extends XFormProperty implements OnInit {
     }
     return result;
   }
+
+  trackByControl(index: number, item: XFormControlOption) {
+    return item.id;
+  }
 }

lib/ng-nest/ui/list/list.component.html

@@ -2,7 +2,7 @@
   <ul cdkDropList (cdkDropListDropped)="dropCdk($event)" [cdkDropListDisabled]="!drag">
     <li
       class="x-list-item"
-      *ngFor="let node of nodes"
+      *ngFor="let node of nodes; trackBy: trackByNode"
       [class.x-selected]="node.selected"
       [class.x-disabled]="node.disabled"
       [class.x-list-icon]="node.icon"

lib/ng-nest/ui/list/list.component.ts

@@ -135,4 +135,8 @@ export class XListComponent extends XListProperty implements OnInit, OnChanges {
     moveItemInArray(this.nodes, event.previousIndex, event.currentIndex);
     this.cdr.detectChanges();
   }
+
+  trackByNode(index: number, item: XListNode) {
+    return item.id;
+  }
 }

lib/ng-nest/ui/menu/menu.component.html

@@ -1,6 +1,6 @@
 <div #menu class="x-menu" [ngClass]="classMap">
   <div class="x-menu-nodes" *ngIf="layout === 'column'">
-    <ng-container *ngFor="let node of nodes">
+    <ng-container *ngFor="let node of nodes; trackBy: trackByNode">
       <ng-container *ngTemplateOutlet="nodeColumnTpl; context: { $node: node, $children: true }"></ng-container>
     </ng-container>
   </div>
@@ -50,7 +50,7 @@
     <ng-container *ngTemplateOutlet="nodeTpl; context: { $node: node }"></ng-container>
   </div>
   <div class="x-menu-nodes" *ngIf="node.childrenLoaded || (node.leaf && node.open)" [hidden]="!node.open">
-    <ng-container *ngFor="let child of node.children">
+    <ng-container *ngFor="let child of node.children; trackBy: trackByNode">
       <ng-container *ngTemplateOutlet="nodeColumnTpl; context: { $node: child }"></ng-container>
     </ng-container>
   </div>

lib/ng-nest/ui/menu/menu.component.ts

@@ -205,4 +205,8 @@ export class XMenuComponent extends XMenuProperty implements OnInit, OnChanges,
     };
     getParent(node);
   }
+
+  trackByNode(index: number, item: XMenuNode) {
+    return item.id;
+  }
 }

lib/ng-nest/ui/message/message.component.html

@@ -1,5 +1,5 @@
 <div class="x-message">
-  <ng-container *ngFor="let item of message.list">
+  <ng-container *ngFor="let item of message.list; trackBy: trackByNode">
     <x-alert
       [@x-move-animation]="item.placement"
       (@x-move-animation.done)="moveDone($event)"

lib/ng-nest/ui/message/message.component.ts

@@ -40,4 +40,8 @@ export class XMessageComponent {
         .subscribe(() => this.onClose(item));
     }
   }
+
+  trackByNode(index: number, item: XMessageOption) {
+    return `${item.title}-${item.content}`;
+  }
 }

lib/ng-nest/ui/notification/notification.component.html

@@ -1,5 +1,5 @@
 <div class="x-notification">
-  <ng-container *ngFor="let item of notification.list">
+  <ng-container *ngFor="let item of notification.list; trackBy: trackByItem">
     <x-alert
       [@x-move-animation]="item.placement"
       (@x-move-animation.done)="moveDone($event)"

lib/ng-nest/ui/notification/notification.component.ts

@@ -42,4 +42,8 @@ export class XNotificationComponent {
         });
     }
   }
+
+  trackByItem(index: number, item: XNotificationOption) {
+    return `${item.title}-${item.content}`;
+  }
 }

lib/ng-nest/ui/pagination/pagination.component.html

@@ -7,7 +7,7 @@
   ></x-button>
   <x-button [activated]="firstActivated" (click)="jump(1)">1</x-button>
   <x-button *ngIf="leftJumpPage" [icon]="'fto-more-horizontal'" (click)="jump(-5, true)"></x-button>
-  <x-button *ngFor="let item of indexes" [activated]="getActivated(item)" (click)="jump(item)">{{ item }}</x-button>
+  <x-button *ngFor="let item of indexes; trackBy: trackByItem" [activated]="getActivated(item)" (click)="jump(item)">{{ item }}</x-button>
   <x-button *ngIf="rightJumpPage" [icon]="'fto-more-horizontal'" (click)="jump(5, true)"></x-button>
   <x-button *ngIf="lastIndex > indexFirst" [activated]="lastActivated" (click)="jump(lastIndex)">{{ lastIndex }}</x-button>
   <x-button [icon]="'fto-chevron-right'" [title]="'pagination.next' | xI18n" [disabled]="rightDisabled" (click)="jump(1, true)"></x-button>

lib/ng-nest/ui/pagination/pagination.component.ts

@@ -128,4 +128,8 @@ export class XPaginationComponent extends XPaginationProperty implements OnChang
   getActivated(index: number) {
     return Number(this.index) === index;
   }
+
+  trackByItem(index: number, item: number) {
+    return item;
+  }
 }

lib/ng-nest/ui/radio/radio.component.html

@@ -10,7 +10,7 @@
   <ng-container *ngIf="button || icon; else default">
     <x-buttons>
       <x-button
-        *ngFor="let item of nodes"
+        *ngFor="let item of nodes; trackBy: trackByItem"
         [icon]="item.icon"
         [size]="size"
         [type]="type"
@@ -27,7 +27,7 @@
   <div class="x-radio-row">
     <div
       class="x-radio-item"
-      *ngFor="let item of nodes"
+      *ngFor="let item of nodes; trackBy: trackByItem"
       [class.x-checked]="item.id === value"
       [class.x-disabled]="item.disabled"
       (click)="radioClick($event, item)"

lib/ng-nest/ui/radio/radio.component.ts

@@ -74,6 +74,10 @@ export class XRadioComponent extends XRadioProperty implements OnChanges {
     });
   }
 
+  trackByItem(index: number, item: XRadioNode) {
+    return item.id;
+  }
+
   formControlChanges() {
     this.setData();
     this.ngOnInit();

lib/ng-nest/ui/rate/rate.component.html

@@ -9,7 +9,7 @@
   <label *ngIf="label" [style.width]="labelWidth" [ngClass]="labelMap">{{ label }}</label>
   <x-buttons (mouseleave)="leaveRates()">
     <x-button
-      *ngFor="let rate of rates"
+      *ngFor="let rate of rates; trackBy: trackByItem"
       onlyIcon
       [activated]="rate <= hoverActivated"
       [disabled]="disabled"

lib/ng-nest/ui/rate/rate.component.ts

@@ -78,6 +78,10 @@ export class XRateComponent extends XRateProperty {
     if (this.onChange) this.onChange(this.value);
   }
 
+  trackByItem(index: number, item: number) {
+    return item;
+  }
+
   formControlChanges() {
     this.ngOnInit();
     this.cdr.detectChanges();