Снятие отметки со всех строк в px-data-table

Question

Я использую px-data-table в приложении Angular2. Таблица данных используется следующим образом:

<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. Возникновение события "px-select-all-click" из Angular:

   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. Установите флажок с идентификатором "selectAllCheckbox" из Angular:

   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 = [];
   

Все три метода не работают. Я искал внутри aha-table.html, импортированного в px-data-table.html, и нашел удобный метод: _setAllRows(e) который отменяет выбор всех строк с _setAllRows(false), Если бы только это было раскрыто или я мог бы вызвать это из Angular, у меня было бы решение проблемы: снятие отметки с выбранных строк.

Любые решения будут полезны.

Answer 1

Заметив, что _setAllRows(e) это метод aha-table который является компонентом, вложенным в px-data-table компонент, доступ к методу легко в соответствии с документацией Polymer для Local DOM API.

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

В принципе $$('selector') является сокращением Polymer для динамически создаваемых узлов. Если я получу ссылку на aha-table узел, я могу вызвать его методы.