Add trackby function so cdktree can differentiate between new and old…

… nodes
dataquest-dev · Aug 22, 2023 · 5f71de8 · 5f71de8
1 parent 05c53ad
commit 5f71de8
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 1 deletion.
diff --git a/src/app/community-list-page/community-list/community-list.component.html b/src/app/community-list-page/community-list/community-list.component.html
@@ -1,5 +1,5 @@
 <ds-themed-loading *ngIf="(dataSource.loading$ | async) && !loadingNode" class="ds-themed-loading"></ds-themed-loading>
-<cdk-tree [dataSource]="dataSource" [treeControl]="treeControl">
+<cdk-tree [dataSource]="dataSource" [treeControl]="treeControl" [trackBy]="trackBy">
   <!-- This is the tree node template for show more node -->
   <cdk-tree-node *cdkTreeNodeDef="let node; when: isShowMore" cdkTreeNodePadding
                  class="example-tree-node show-more-node">

diff --git a/src/app/community-list-page/community-list/community-list.component.ts b/src/app/community-list-page/community-list/community-list.component.ts
@@ -30,6 +30,7 @@ export class CommunityListComponent implements OnInit, OnDestroy {
   );
 
   dataSource: CommunityListDatasource;
+  trackBy = (index, node: FlatNode) => node.id;
 
   paginationConfig: FindListOptions;