添加行时来自 PrimeNG p-datatable 的事件

Question

我有一个 p-datatable 绑定到条目列表。我想将焦点放在新的、动态创建的行上；特别是在新行中的 input 上。但是怎么办？

每当我将一个条目动态添加到条目的绑定列表时，就会添加一个新的数据表行。工作正常。但我需要知道那是什么时候发生的，我需要访问新行以便我可以设置焦点。我一直在寻找某种 onRowAdded 活动，但 p-datatable 似乎没有。如何解决这个问题？

<p-dataTable [value]="entries">
   . . .
   <p-column>
      <ng-template let-item="rowData" pTemplate="body">
          <input type="time" [value]="item.StartTime"/>
   . . .

Answer 1

好的，所以我找到了一个独立于p-datatable的solution/workaround。

我在渲染行中的一个模板化元素上设置了一个 angular QueryList 并订阅了它的变化。这样我就可以到达新添加的行以设置焦点。

所以，在 html:

<p-dataTable [value]="entries">
   <p-column">
      <ng-template let-item="rowData" pTemplate="body">
          <input #myInput />

... 在代码隐藏中：

@ViewChildren('myInput') startTimeInputList: QueryList<ElementRef>;
. . .
ngAfterViewInit() {
   this.startTimeInputList.changes.subscribe((p) => {
       this._renderer.invokeElementMethod(p.last.nativeElement, 'focus');
   });
}

添加行时来自 PrimeNG p-datatable 的事件

Event from PrimeNG p-datatable when row is added

angular

datatable

primeng