px-data-table의 모든 행을 선택 해제하십시오.

Question

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)가 시작되고 여러 행이 선택됩니다. 이제 사용자 상호 작용을 통하지 않고 선택한 행을 코드에서 선택 취소하고 싶습니다. 이벤트 코너에서에 의해 'PX-선택 - 모든 클릭'

1. 화재 : 내가 (작동하지 않았다) 다음과 같은 방법으로 갔다

   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. 이 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(false)을 가진 모든 행을 선택 해제하는 _setAllRows(e). 이것 만이 드러났거나 Angular에서 이것을 호출 할 수 있다면 문제에 대한 내 해결책이 있습니다. 선택한 행의 선택을 취소하십시오.

모든 솔루션이 도움이 될 것입니다.

Answer 1

_setAllRows(e)이 방법 Local DOM API 용 중합체 설명서에 따라 쉽게 액세스, px-data-table 요소 아래에 중첩 된 성분이다 aha-table 방법이라고 확인되면.

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

기본적으로 $$('selector')은 동적으로 생성 된 노드의 약어입니다. aha-table 노드에 대한 참조를 얻으면 그 메소드를 호출 할 수 있습니다.