0

我在 Angular2 应用程序中使用px-data-table 。数据表的使用如下：

<px-data-table #myTableRef [tableData]='tableDetails' language="en" (px-row-click)="selectedChanged($event)" (px-select-all-click)="selectAll($event)" sortable selectable show-column-chooser>
    <px-data-table-column *ngFor="let header of headers" type="html" name="{{header.value}}" label="{{header.label}}" [disableHide]="header.disableHide" [hide]="!header.disableHide">
    </px-data-table-column>
</px-data-table>

用户选择多行。所以 selectedChanged($event) 被触发并选择了多行。现在，我希望不通过用户交互从代码中取消选中所选行。我采用了以下方法（不起作用）：

  1. 通过以下方式从 Angular 触发事件“px-select-all-click”：

    this.myTableRef.nativeElement.fire('px-select-all-click')
this.myTableRef.nativeElement.fire('px-select-all-click', this.myTableRef.nativeElement.selectedRows)
// also did a ChangeDetectorRef.detectChanges() after injection but it did not work.

  2. 通过以下方式从 Angular 中选择 id 为“selectAllCheckbox”的复选框：

    this.myTableRef.nativeElement.shadowRoot.querySelector('selectAllCheckBox')
this.myTableRef.nativeElement.querySelector('selectAllCheckbox')
//returns null in both cases so I can't do a .click() on it

  3. 清空 selectedRows 属性：

    this.myTableRef.nativeElement.selectedRows = [];

这三种方法都不起作用。我正在查看在 px-data-table.html 中导入的 aha-table.html 并找到了一种方便的方法：_setAllRows(e)取消选择所有带有_setAllRows(false). 如果只有这个被暴露，或者我可以从 Angular 调用它，我就有解决问题的方法：取消选中选定的行。

任何解决方案都会有所帮助。

4

1 回答 1

0

在注意到这_setAllRows(e)是aha-table一个嵌套在组件下的组件的方法后，根据本地 DOM APIpx-data-table的 Polymer 文档，访问该方法很容易。

let tableRef = this.myTableRef.nativeElement;
tableRef.$$('aha-table')._setAllRows(false);

基本上$$('selector')是动态创建节点的 Polymer 简写。如果我得到aha-table节点的引用，我可以调用它的方法。

于 2017-11-01T17:51:11.260 回答