lundi 16 avril 2018

Angular 5: How to prevent TrackBy interfering with other aspects of a table.

I have a web page with a table on that shows data, I am using

*ngFor= " let item of items | slice:pgStart:pgEnd ; trackBy:function, let i = index "

to display the data and update it as the information in the table changes. ( at the moment I have a GET request polling a server for that information but that's not important). I have given the table pagination functionality and this is where the disagreement comes. The slicePipe is for the pagination.

The problems I have are with a checkbox I have on every row, and with a collapsable aspect. Every row has another row that un-collapses when you click on the row, and if you un-collapse a row then go to another page with the pagination buttons, sometimes the row remains un-collapsed. Sometimes it doesn't.

The checkbox problem is similar, if a row is selected and you change the page being viewed, sometimes the tick persists, sometimes it doesn't. This one I imagine is slightly more complex because I have a master checkbox that ticks all of them and I have used Angulars two way binding on this.

Master checkbox in header row: [(ngModel)]="check"

Individual checkboxes in row: [ngModel]="check"

The trackBy function is: (names are unique in this project)

private function(index: number, obj: any): any {
    return obj.name
}

I think the problem is to do with what the trackBy is using to track the table rows , but I am unable to find anything to help me with its application to paginated tables. Help much appreciated




Aucun commentaire:

Enregistrer un commentaire