Angular 2 - Refresh ngx-datatable list issue
Solution 1
I think to refresh the table you must do:
this.rows = [...this.rows]
Solution 2
this.rows.push(result);
this.rows = [...this.rows]
Solution 3
According to swimlane page of ngx-datatable
, ngx-datatable
follow OnPush change detection strategy, hence it only checks for immutable data types.
So if you want ngx-datatable
to detect changes. After doing :
this.selected.push(...selected);
Do:
this.selected = [...this.selected]
Read more about change detection here: Link
Solution 4
I stumbled with this post because I was having a problem when any column was being sorted the UI was not updating a inner component until I scroll up and down again.
I managed to do a workaround with what was suggested previously:
UI:
<ngx-datatable (......) (sort)="onSort()">
TS:
onSort() {
const data = this.filteredTableValues;
this.filteredTableValues = [];
this.changeDetectorRef.detectChanges();
this.filteredTableValues = [...data];
}
Hope this helps someone in the same case
Marc El Bichon
Updated on June 14, 2022Comments
-
Marc El Bichon about 2 years
I'm working on an Angular 2 project. I use ngx-datatable to display a list of users:
<ngx-datatable class="material" [rows]="rows" [columnMode]="'force'" [headerHeight]="40" [footerHeight]="40" [rowHeight]="30" [externalPaging]="true" [limit]="limit" (select)='onSelect($event)' (activate)='onActivate($event)' [selected]="selected" [selectionType]="'checkbox'"> <ngx-datatable-column [width]="30" [sortable]="false" [canAutoResize]="false" [draggable]="false" [resizeable]="false" [headerCheckboxable]="true" [checkboxable]="true"> </ngx-datatable-column> <ngx-datatable-column name="Name"> <ng-template let-value="value" ngx-datatable-cell-template> <div class="redNumber">{{value}}</div> </ng-template> </ngx-datatable-column> <ngx-datatable-column name="Title"></ngx-datatable-column> <ngx-datatable-column name="company"></ngx-datatable-column> <ngx-datatable-column name="Status" [cellClass]="getStatusClass"> </ngx-datatable-column> <ngx-datatable-column name="Last connexion"></ngx-datatable-column>
When I click on the button that trigger the following showAll() method, nothing happens, unless I click a second time, the list is refreshed, or if I click once, and resize my browser's window, the list is refreshed.. How can I refresh the list correctly? what am I doing wrong? In my component class, I have this:
export class M1OamRoomsListComponent{ selected = []; public rows = [ .... // list of users ]; public limit: number; constructor(public translation: TranslationService){ this.limit = 10; } getStatusClass({ row, column, value }): any { return { 'disabled': value === 'Disabled', 'enabled': value === 'Enabled' }; } onSelect({ selected }) { console.log('Select Event', selected, this.selected); this.selected.splice(0, this.selected.length); this.selected.push(...selected); } onActivate(event) { //console.log('Activate Event', event); } showAll(): void { this.limit = this.rows.length; } }