取消选中 px-data-table 中的所有行答案

【问题标题】：Unchecking all the rows in px-data-table取消选中 px-data-table 中的所有行
【发布时间】：2017-11-01 13:03:11
【问题描述】：

我在 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) 被触发并选择了多行。现在，我希望不通过用户交互从代码中取消选中所选行。我采用了以下方法（不起作用）：

来自 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.

通过以下方式从 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

清空 selectedRows 属性：

this.myTableRef.nativeElement.selectedRows = [];

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

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

【问题讨论】：

标签： javascript angular typescript polymer-1.0 predix

【解决方案1】：

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

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

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

【讨论】：