fix(module:tree-view): node indent line without mark change check

fix NG-ZORRO#6714
hsuanxyz · Jun 7, 2021 · 6d5cbd7 · 6d5cbd7
1 parent 7199ad5
commit 6d5cbd7
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 4 deletions.
diff --git a/components/tree-view/demo/editable.ts b/components/tree-view/demo/editable.ts
@@ -1,6 +1,6 @@
 import { SelectionModel } from '@angular/cdk/collections';
 import { FlatTreeControl } from '@angular/cdk/tree';
-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 import { NzTreeFlatDataSource, NzTreeFlattener } from 'ng-zorro-antd/tree-view';
 
@@ -56,6 +56,9 @@ interface FlatNode {
         >
           {{ node.name }}
         </nz-tree-node-option>
+        <button nz-button nzType="text" nzSize="small" (click)="delete(node)">
+          <i nz-icon nzType="minus" nzTheme="outline"></i>
+        </button>
       </nz-tree-node>
 
       <nz-tree-node *nzTreeNodeDef="let node; when: hasNoContent" nzTreeNodeIndentLine>
@@ -75,7 +78,8 @@ interface FlatNode {
       </nz-tree-node>
     </nz-tree-view>
   `,
-  styles: [``]
+  styles: [``],
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class NzDemoTreeViewEditableComponent {
   private transformer = (node: TreeNode, level: number) => {
@@ -122,6 +126,33 @@ export class NzDemoTreeViewEditableComponent {
   hasNoContent = (_: number, node: FlatNode) => node.name === '';
   trackBy = (_: number, node: FlatNode) => `${node.key}-${node.name}`;
 
+  delete(node: FlatNode): void {
+    const originNode = this.flatNodeMap.get(node);
+
+    const dfsParentNode = (): TreeNode | null => {
+      const stack = [...this.treeData];
+      while (stack.length > 0) {
+        const n = stack.pop()!;
+        if (n.children) {
+          if (n.children.find(e => e === originNode)) {
+            return n;
+          }
+
+          for (let i = n.children.length - 1; i >= 0; i--) {
+            stack.push(n.children[i]);
+          }
+        }
+      }
+      return null;
+    };
+
+    const parentNode = dfsParentNode();
+    if (parentNode && parentNode.children) {
+      parentNode.children = parentNode.children.filter(e => e !== originNode);
+    }
+
+    this.dataSource.setData(this.treeData);
+  }
   addNewNode(node: FlatNode): void {
     const parentNode = this.flatNodeMap.get(node);
     if (parentNode) {

diff --git a/components/tree-view/indent.ts b/components/tree-view/indent.ts
@@ -3,7 +3,7 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { ChangeDetectionStrategy, Component, Directive, Input, OnDestroy } from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Directive, Input, OnDestroy } from '@angular/core';
 import { animationFrameScheduler, asapScheduler, merge, Subscription } from 'rxjs';
 import { auditTime } from 'rxjs/operators';
 import { NzTreeNodeComponent } from './node';
@@ -49,7 +49,7 @@ export class NzTreeNodeIndentLineDirective<T> implements OnDestroy {
   private currentIndents: string = '';
   private changeSubscription: Subscription;
 
-  constructor(private treeNode: NzTreeNodeComponent<T>, private tree: NzTreeView<T>) {
+  constructor(private treeNode: NzTreeNodeComponent<T>, private tree: NzTreeView<T>, private cdr: ChangeDetectorRef) {
     this.buildIndents();
     this.checkLast();
 
@@ -62,6 +62,7 @@ export class NzTreeNodeIndentLineDirective<T> implements OnDestroy {
       .subscribe(() => {
         this.buildIndents();
         this.checkAdjacent();
+        this.cdr.markForCheck();
       });
   }