Merge pull request #505 from andrewlo/trackByNodes

fixes #504 - Add trackBy functions to ngFor in component tree
rangle · Aug 4, 2016 · 2ef7ff8 · 2ef7ff8
2 parents 0c39f9a + 35b14f4
commit 2ef7ff8
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/src/frontend/components/component-tree/component-tree.html b/src/frontend/components/component-tree/component-tree.html
@@ -1,6 +1,6 @@
 <!-- BLOCK VIEW -->
 <main class="monospace col-12 p1">
-  <bt-node-item *ngFor="let node of tree"
+  <bt-node-item *ngFor="let node of tree; trackBy: trackById"
     [changedNodes]="changedNodes"
     [node]="node"
     [selectedNode]="selectedNode"

diff --git a/src/frontend/components/component-tree/component-tree.ts b/src/frontend/components/component-tree/component-tree.ts
@@ -45,4 +45,7 @@ export class ComponentTree {
     }
   }
 
+  trackById(index: number, node: any): string {
+    return node.id;
+  }
 }
diff --git a/src/frontend/components/node-item/node-item.ts b/src/frontend/components/node-item/node-item.ts
@@ -29,7 +29,7 @@ import {UserActions} from '../../actions/user-actions/user-actions';
       </div>
     
       <div class="border-box pl4" *ngIf="node.isOpen || wasRendered">
-        <bt-node-item *ngFor="let node of node.children"
+        <bt-node-item *ngFor="let node of node.children; trackBy: trackById"
           [changedNodes]="changedNodes"
           [hidden]="showChildren()"
           [selectedNode]="selectedNode"
@@ -190,4 +190,8 @@ export class NodeItem {
       }
     }
   }
+
+  trackById(index: number, node: any): string {
+    return node.id;
+  }
 }