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"/> . . .。如何解决这个问题？

// ...
ctx.fillText("Julia", can.width / 2, can.height / 2);
can.toBlob(function(blob) {
    var newImg = document.createElement('img'),
        url = URL.createObjectURL(blob);
    newImg.onload = function() {
        // no longer need to read the blob so it's revoked
        URL.revokeObjectURL(url);
        newImg.src = url;
        // we have image out of canvas and now do the upload of newImg
        // $http || $.ajax call goes here
    };
});

Answer 1

好的，所以我找到了一个独立于p-datatable的解决方案/解决方法。

我在渲染行中的一个模板化元素上设置了一个角度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的事件

1 个答案: