Question

我试图获取第一行的引用，以允许在表行上进行箭头键导航。我尝试使用具有功能的以下代码，该功能可在开发版本中使用，但在生产版本中，angular会删除ng-reflect绑定，因此无法获得参考。有什么解决办法吗？

   getElementByXpath(path) {
   return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
 }
   let firstRow: any = this.getElementByXpath('//datatable-body-row[@ng-reflect-row-index="0"]');
   if(firstRow) {
     firstRow.focus();
   }

Answer 1

我通过使用document.getElementByClassName解决了此问题。但是此解决方案仅适用于dom中存在的第一个表。

const element: any = document.getElementsByClassName("datatable-body-row").item(0);
if (element) {
   element.focus();
}

Answer 2

在模板中添加模板引用变量（在我的情况下是#table）。如果您查看文档，则会发现数据表中有一个名为 selected 和 selectionType 的输入。 Documentation

您的模板应如下所示：

    <ngx-datatable
    #table
    class="bootstrap"
    [headerHeight]="50"
    [limit]="5"
    [columnMode]="ColumnMode.force"
    [footerHeight]="50"
    rowHeight="auto"
    [rows]="rows"
    [selected]="selected"
    [selectionType]="SelectionType.single">

在组件中添加选定的属性；

export class AppComponent {
  selected = [];

现在在构造函数中，您可以使用this.selected = [data[0]];轻松地专注于第一行。也许更适合放在第一行的地方是Angular lifecycle hooks

中的一个

这是Stackblitz演示： https://stackblitz.com/edit/angular-ivy-nsmcki?file=src/app/app.component.ts

演示是此处给出的代码示例的修改： https://swimlane.github.io/ngx-datatable/#single-selection

如何以编程方式关注ngx-datatable的第一行？

2 个答案: