Angular2 + PrimeNG - 如何在底层数据更改时重置 dataTable？

Question

我正在将 Cell 个对象的数组绑定到 PrimeNG 数据表：

.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()方法来清除sorting/filtering/selection状态。每当 URL 参数发生变化并且正在加载新数据时，我都需要调用它。

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

Answer 1

您可以利用 @ViewChild 注释：

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

    // ...

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

Answer 2

感谢 rinukkusu。在较新版本的 primeng 中，它是这样工作的：

//Just replace DataTable with Table
import {Table} from 'primeng/components/table/table';

export class MyComponent implements OnInit {
   @ViewChild(Table) tableComponent: Table;

   // ...

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

Angular2 + PrimeNG - 如何在底层数据更改时重置 dataTable？

Angular2 + PrimeNG - How to reset dataTable when the underlying data changes?

primeng

angular