Question

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

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

我正在获取EditableColumn：@ViewChild(EditableColumn) editableColumn: EditableColumn;

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

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

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

Answer 1

有同样的问题。我已经找到了针对动态生成列的解决方案。如果单击了同级表字段单元格，则必须打开每一行的一个特定单元格。例如。单击城市字段，然后打开地址单元。

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

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>

Answer 2

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

Primeng表：

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

打字稿：

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

Answer 3

此方法的窍门是在您要打开的可编辑列上调用onClick（event）。

editableColumn.onClick(e);

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

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

以编程方式切换p-table单元以在Primeng中编辑模式

3 个答案: