需要在双击时显示特定初始树节点的文本框

Question

我有一个初始树节点。当我单击节点标签时，它应该变成一个文本框，但只针对该节点。我尝试了一个布尔标志，它的工作，但显示所有的文本框。是否有一个简单的修复只显示该节点的文本框?

我的代码

.ts

import { Component, OnInit } from '@angular/core';
import { NodeService } from './nodeservice';
import { TreeNode } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
nodes: TreeNode[];
showText = false;
constructor() {}
ngOnInit() {
this.nodes = [
{
key: '0',
label: 'Introduction',
children: [
{ key: '0-0', label: 'What is Angular' },
{ key: '0-1', label: 'Getting Started' },
{ key: '0-2', label: 'Learn and Explore' },
{ key: '0-3', label: 'Take a Look' },
],
},
];
}
showTextbox() {
this.showText = true;
}
}

. html

<p-tree [value]="nodes">
<ng-template let-node pTemplate="default">
<div  *ngIf="!showText" (dblclick)="showTextbox()">
<b>{{ node.label }}</b>
</div>
<div *ngIf="showText">
<input type="text" [value]="node.label" />
</div>
</ng-template>
</p-tree>

这是stackblitz的链接。

Answer 1

这可以通过使用新标志来实现。

. html

<div *ngIf="showTextForNodeId != node.key || !showText"
(dblclick)="showTextbox(node.key)">
<b>{{ node.label }}</b>
</div>
<div *ngIf="showTextForNodeId == node.key && showText">
<input type="text"
[value]="node.label"
(blur)="updateNode($event.target.value, node.key)"
/>
</div>

.ts

showTextForNodeId = undefined;
showText = false;
showTextbox(key) {
this.showTextForNodeId = key;
this.showText = true;
}
updateNode(newName, key) {
this.findAndUpdateNode(this.nodes, newName, key);
this.showTextForNodeId = undefined;
this.showText = false;
}
findAndUpdateNode(nodes, newName, key) {
for (let i = 0; i < nodes.length; i++) {
if (nodes[i].key == key) {
nodes[i].label = newName;
} else if (nodes[i].children) {
this.findAndUpdateNode(nodes[i].children, newName, key);
}
}
}

---

注::如果存在，请检查边缘情况。