Angular2 PrimeNG – 当底层数据发生变化时如何重置dataTable？

发布时间：2020-12-17 18:00:27 所属栏目：安全来源：网络整理

导读：我将一个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-col

我将一个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>

.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'));
        });
    }

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

但是如何引用dataTable并从ngOnInit()方法中调用reset()方法？

解决方法

您可以利用 @ViewChild注释：

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

    // ...

    ngOnInit() {
        this.dataTableComponent.reset();
    }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!