How to feed the content via *ngFor in DataTables?

Good day,

Anyone used DataTables in conjunction with angular2?
The problem is as follows:
There is a component of the table: sa-datatable, passing it the required options: [options]="optionsTable". It's all OK. everything works.
Then in the body of the table output using *ngFor the right information to the table. Here all is well until the moment until you get to another page, and then again never coming back to this. Then it will be displayed as content (using *ngFor), but the table will assume that anything in it is not present (number 0 out of 0), and when you try to sort, will I lose the content.

Code example (not real)
***.component.html
<sa-datatable ['options']="optionsTable" tableclass="display projects-table table table-striped table-bordered table-hover" width="100%">


 columns 1
 columns 2
 columns 3
 columns 4
 columns 5



{{line.row_1}}
{{line.row_2}}
{{line.row_3}}
{{line.row_4}}
{{line.row_5}}

</sa-datatable>


***.component.ts
public lines: any;
 public optionsTable = {
 "colReorder": true,
 "paging": false,
 "filter": false,
 "order": [[0, 'desc']],
};

 ngOnInit() {
this.getLines();
}

 private getLines() {
this.linesService.getLines()
.subscribe(
 data => {
 this.lines = data.lines;
}
)
 }
July 2nd 19 at 13:26
1 answer
July 2nd 19 at 13:28
It is not the first time I meet the issue that the data from the array are lost after sorting. A high probability that you are assigned after sorting, the sorted array in the place where was the former. Because ngFor associated with the old array, it is logical that after GC it finds nothing. You need to work with a single object and not to grind pointers.
No, *ngFor displays the information in the table body correctly, even after the page transitions and back. It's all good. The problem is that the plugin DataTables for some reason after a transition to another page and then return, do not process what is in the body. It seems that it's empty. But *ngFor all displays.
I now think it's all demonstratively show, but quite difficult as many of the dependencies somewhere to lay out, besides removing the content - Fay32 commented on July 2nd 19 at 13:31
A well-built application, all components perform a highly specialized task, which is not difficult to isolate them. Perhaps you should rethink the architecture for refactoring. - lavon.Turn commented on July 2nd 19 at 13:34
With sturctural all is well. Angular-cli + SmartAdmin. nothing more. I'm just not entirely correctly described what is the complexity. The difficulty is to not put code that no one should see - Fay32 commented on July 2nd 19 at 13:37
: well, I think, success) - lavon.Turn commented on July 2nd 19 at 13:40
: The whole point in this DataTables. Make a normal table, everything is OK)
Look into it; maybe someone more clever will tell. Then note the response decision. For the given time - Fay32 commented on July 2nd 19 at 13:43
: Understand the problem, but don't found a solution. The DataTables plugin is loaded at the same time triggers *ngFor. First time *ngFor manages to fill the table body, so the plugin can eat content. In the transition to another page and return back, the plugin is already cached, and *ngFor even that's only going to scatter the data. DataTables looks, nothing in the body is not present, and throws 0. And the same time fulfills *ngFor. Don't know how to distribute for example :) - Fay32 commented on July 2nd 19 at 13:46

Find more questions by tags AngularjQuery