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

3 つの方法はすべて機能しません。px-data-table.html 内にインポートされた aha-table.html 内を調べていたところ、便利な方法が見つかりまし_setAllRows(e)た_setAllRows(false)。これだけが公開されるか、Angular からこれを呼び出すことができれば、選択した行のチェックを外すことで問題を解決できます。

どんな解決策も役に立ちます。

4

1 に答える 1

0

が component の下にネストされたコンポーネントである_setAllRows(e)メソッドであることに気付いた後、 Local DOM APIの Polymer ドキュメント に従って、メソッドにアクセスするのは簡単です。aha-tablepx-data-table

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

基本的$$('selector')には、動的に作成されたノードの Polymer 省略形です。ノードの参照を取得するaha-tableと、そのメソッドを呼び出すことができます。

于 2017-11-01T17:51:11.260 に答える