以编程方式将 p-table 单元格切换到 Primeng 中的编辑模式答案

【问题标题】：Switch p-table cell programmatically to edit mode in Primeng以编程方式将 p-table 单元格切换到 Primeng 中的编辑模式
【发布时间】：2020-07-21 04:03:28
【问题描述】：

我有一个primeng 表（新模块），其中包含显示简单数据的可编辑单元格。在表格之外，我有一个按钮可以将新的空对象/行添加到表格中，并且我想在单击按钮时以编程方式跳转到新单元格中的编辑模式。

我可以将空行添加到表格中，但我不知道如何将新的行单元格元素切换到编辑模式。

我得到这样的 EditableColumn：@ViewChild(EditableColumn) editableColumn: EditableColumn;

...
<td *ngFor="let col of columns" style="width:150px;height: 27px" #td pEditableColumn>
...

在editableColumn 上，我可以调用 openCell() 方法，但它总是跳转到第一个生成的单元格，而不是新生成的行单元格。

有人可以帮忙吗？有没有更好的方法来实现我的目标？

【问题讨论】：

你能创建一个 Plunker 或者至少分享更多代码吗？
我知道这是旧的，但你有没有想过如何处理这个？
这里有同样的问题：显然这并不容易。特别是因为可编辑的 HTML 标签不存在，而是动态添加。
见stackoverflow.com/questions/61587359/…

标签： angular primeng

【解决方案1】：

这个技巧是在您想要打开的可编辑列上调用 onClick(event)。

editableColumn.onClick(e);

您可以通过多种方式获取对列的引用，一种是使用 ViewChildren

@ViewChildren(EditableColumn) private editableColumns: QueryList<EditableColumn>;

【讨论】：

但是如何在 Angular 中加载表格后将表格中的所有单元格设置为可编辑？

【解决方案2】：

遇到同样的问题。我已经为动态生成列的情况找到了解决方案。如果单击同级表字段单元格，我必须打开每一行的一个特定单元格。例如。点击城市字段，我应该打开地址单元格。

我知道解决方案可能看起来很难看，但这是我能找到的唯一可能的解决方案。

TS：

@ViewChild(EditableColumn) editableColumn: EditableColumn
@ViewChildren(EditableColumn) private editableColumns: QueryList<EditableColumn>

openGoogleAddress(event): void {
  if (event?.path) {
    const currentRowAddressCell = this.editableColumns.filter(
      item => item?.el?.nativeElement === event?.path[3]?.children[1]
    )
    this.editableColumn = currentRowAddressCell[0]

    setTimeout(() => {
      this.editableColumn.openCell()
    }, 0)
  }
}

HTML：

<div *ngSwitchCase="'city'">
  <span class="p-flex" (click)="openGoogleAddress($event)">{{
    (rowData[col.value][col.sublabel] | titlecase) || emptyDash
  }}</span>
</div>

【讨论】：

【解决方案3】：

这可以通过以下方式轻松完成：

启动表：

<p-table #dt [columns]="header" [value]="data">

打字稿：

addRow(dt: Table) { dt.editingCell = document.getElementById('cellId');}

【讨论】：

您没有显示 id cellId 附加到什么，所以这没什么帮助。