Angular Material mat-tree实现双击单节点就地编辑的问题

问题根源是你用的nodeEdit是组件类的全局变量，所有树节点共享这个状态，所以双击一个节点时所有输入框都会触发显示。ng-container不会创建新的组件作用域，没法隔离状态。

解决方法是让每个树节点自己管理编辑状态，有两种实现方式：

方式一：给节点数据添加编辑状态属性 #

直接在节点数据结构中新增字段，让每个节点独立控制是否处于编辑模式：

1. 更新节点数据结构
   在你的节点接口中添加isEditing字段，初始化时设为false：

   interface TreeNode {
     item: string;
     children?: TreeNode[];
     isEditing: boolean; // 新增编辑状态字段
   }
   

   初始化数据源时，给所有节点设置isEditing: false；动态添加节点时也要记得设置这个属性。

2. 修改模板逻辑
   将模板中依赖全局nodeEdit的部分，替换为当前节点的isEditing属性：

   <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
     <!-- 普通节点模板 -->
     <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding>
       <button mat-icon-button disabled></button>
       
       <ng-container>
         <mat-form-field appearance="fill" *ngIf="node.isEditing; else nodeShow">
           <!-- 双向绑定节点值，支持实时修改 -->
           <input type="text" matInput [(ngModel)]="node.item" 
                  <!-- 失去焦点或回车时退出编辑 -->
                  (blur)="node.isEditing = false" (keyup.enter)="node.isEditing = false">                           
         </mat-form-field>
         <ng-template #nodeShow> 
           <span (dblclick)='node.isEditing = !node.isEditing'>{{node.item}} (双击编辑)</span>
         </ng-template>
       </ng-container>
     </mat-tree-node>
   
     <!-- 以下节点模板保持不变 -->
     <mat-tree-node *matTreeNodeDef="let node; when: hasNoContent" matTreeNodePadding>
       <button mat-icon-button disabled></button>
       <mat-form-field appearance="fill">
         <mat-label>New item...</mat-label>
         <input matInput #itemValue placeholder="Ex. Lettuce">
       </mat-form-field>
       <button mat-button (click)="saveNode(node, itemValue.value)">Save</button>
     </mat-tree-node>
   
     <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding>
       <button mat-icon-button matTreeNodeToggle
               [attr.aria-label]="'Toggle ' + node.item">
         <mat-icon class="mat-icon-rtl-mirror">
           {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
         </mat-icon>
       </button>
       {{node.item}}   222
       <button mat-icon-button (click)="addNewItem(node)"><mat-icon>add</mat-icon></button>
     </mat-tree-node>
   </mat-tree>
   

方式二：用组件集合维护编辑状态（不修改节点数据） #

如果不想改动节点原始数据，可以在组件类中用集合记录当前处于编辑状态的节点：

1. 组件类中添加状态管理

   // 用Set存储当前编辑的节点，确保唯一性
   editingNodes = new Set<TreeNode>();
   
   toggleNodeEdit(node: TreeNode) {
     if (this.editingNodes.has(node)) {
       this.editingNodes.delete(node);
     } else {
       // 可选：每次只允许一个节点编辑，清空之前的编辑状态
       this.editingNodes.clear();
       this.editingNodes.add(node);
     }
   }
   

2. 修改模板逻辑

   <ng-container>
     <mat-form-field appearance="fill" *ngIf="editingNodes.has(node); else nodeShow">
       <input type="text" matInput [(ngModel)]="node.item" 
              (blur)="toggleNodeEdit(node)" (keyup.enter)="toggleNodeEdit(node)">                           
     </mat-form-field>
     <ng-template #nodeShow> 
       <span (dblclick)='toggleNodeEdit(node)'>{{node.item}} (双击编辑)</span>
     </ng-template>
   </ng-container>
   

两种方式都能实现「双击单个节点仅激活该节点输入框」的效果，根据你的数据结构偏好选择即可。

内容的提问来源于stack exchange，提问作者Santosh