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

Question

我有一个 primeng 树节点。当我单击节点标签时，它应该变成一个文本框，但仅限于该节点。我尝试使用布尔标志，它有效但显示了所有文本框。是否有一个简单的修复方法来仅显示该节点的文本框？

这是我的代码

.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 link.

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);
    }
  }
}

P.S.: 请检查边缘情况，如果它们存在。

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

Need to show a textbox on double click for the particular primeng tree node

primeng

angular

primeng-tree