Alle Zeilen in der px-Datentabelle

Question

entmarkieren Ich verwende px-data-table in einer Angular2-Anwendung. Die Datentabelle verwendet wird, wie folgt:

<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> 

die Benutzer mehr als eine Zeile auswählt. So wird selectedChanged ($ event) ausgelöst und mehrere Zeilen ausgewählt. Jetzt möchte ich, dass die ausgewählten Zeilen nicht über die Benutzerinteraktion aus dem Code entfernt werden. Ich ging mit den folgenden Ansätzen (was nicht funktioniert):

1. Feuer Ereignis 'px-select-all-Klick' von Angular von:

   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. Wählen Sie das Kontrollkästchen mit der ID ‚selectAllCheckbox 'von Angular von:

   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. entleeren SelectedRows Attribut:

   this.myTableRef.nativeElement.selectedRows = []; 
   

Alle drei Methoden funktionieren nicht. Ich schaute in die aha-table.html importiert in der px-data-table.html und fand eine bequeme Methode: _setAllRows(e) die alle Zeilen mit _setAllRows(false) abwählen. Wenn dies nur angezeigt würde oder ich dies von Angular aus aufrufen könnte, hätte ich meine Lösung für das Problem: die ausgewählten Zeilen deaktivieren.

Alle Lösungen wären hilfreich.

Answer 1

Nach bemerken, dass die _setAllRows(e) Verfahren zum aha-table sind, das eine Komponente unter px-data-table Komponente, den Zugriff auf das Verfahren ist einfach, nach der Polymer-Dokumentation für Local DOM API verschachtelt ist.

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

$$('selector') Grundsätzlich ist das Polymer eine Abkürzung für dynamisch erzeugten Knoten. Wenn ich die Referenz für den aha-table Knoten bekomme, kann ich seine Methoden aufrufen.