Angular2 + PrimeNG - 当底层数据发生变化时如何重置dataTable?

use*_*875 5 primeng angular

我正在将一个Cell对象数组绑定到PrimeNG DataTable:

html的:

  <p-dataTable [value]="_cells" [responsive]="true" [globalFilter]="gb">
        <p-column field="id" header="id" sortable="true"></p-column>
        <p-column field="name" header="name" sortable="true" ></p-column>         
    </p-dataTable>
Run Code Online (Sandbox Code Playgroud)

.TS:

ngOnInit() {
        var self = this;
        // Capture the id in the URL
        this._route.params.subscribe(params => {
            self._stationId= params['id'];

            this._dataService
                .GetAllCells(self._stationId)
                .subscribe((data:Cell[]) => this._cells = data,
                    error => alert(error),
                    () => console.log('Retrieved cells'));
        });
    }
Run Code Online (Sandbox Code Playgroud)

所以我发现dataTable有一个reset()清除排序/过滤/选择状态的方法.每当URL参数更改并且正在加载新数据时,我都需要调用它.

但是如何引用dataTable并从reset()方法内部调用ngOnInit()方法?

rin*_*usu 17

您可以利用@ViewChild注释:

export class MyComponent implements OnInit {
    @ViewChild(DataTable) dataTableComponent: DataTable;

    // ...

    ngOnInit() {
        this.dataTableComponent.reset();
    }
}
Run Code Online (Sandbox Code Playgroud)

  • 这有效,但它似乎清除了过滤器和其他一切. (3认同)
  • `from {primeng/components/datatable/datatable'中的`import {DataTable};`谢谢以后. (2认同)