Angular 4 - Datatable isn't reloading data correctly.

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x ] Bug report  
[ ] Feature request
[ ] Documentation issue or request

What versions you are using?

- node version: 6.11.2
- angular version: 4
- angular-cli version: 1.2.7
- jquery version: 1.9.1
- datatables version: 1.10.16
- angular-datatables version: 4.4.1

Current behavior

When I load the datatable the first time, everything works propertly, but if I add / edit or delete a new row using http, the data changes but the table doesn’t recognize it. For example, If the table is empty it shows “No data available in table”, after I push a new row to my array, I can see the row but also the “no data available” message,in the footer still displays “showing 0 to 0 of 0 entries” and I can’t use the search bar to find the new row because it says no results. I tried using the rerender method as shown in the documentation, but after the rerender the new data disappear.

First time the table is loaded

After the data is addes

Expected behavior

The table should recognize the changes made to the data in the table.

Minimal reproduction of the problem with instructions

This is my component

export class DrillsComponent implements OnInit {
    public drills: Array<Drill>;
    public addDrill = new Drill();
    dtOptions: any = {};
    dtTrigger: Subject<any> = new Subject();

    constructor(private drillService: DrillService ) {
        this.drill = [];
        this.getDrills();
        this.dtOptions = {
            pagingType: 'full_numbers',
            retrieve: true,
        };
    }

//function to load data from API
getDrills() {
        this.drillService.getDrills()
        .subscribe(
            data => {
              for (let drill of data) {
                this.drills.push(new Drill(drill))
		this.dtTrigger.next();
              }
            },
            error => {
              console.log(error)
            }
        );
    }
//Functin to add new data
saveDrill(){
      this.drillService.saveDrill(this.addDrill).subscribe(
          data => {
              this.drills.push(new Drill(data))
          },
          error => {
            console.log(error)
          });
        }

Methods in my service to send and load the data

//Get data from api
getDrills() {
    return this.http.get(this.apiUrl).map(res => res.json());
  }
//Save data in API
  saveDrill(data) {
  return this.http.post(this.apiUrl,data).map(res => res.json());
}

Template

<table class="table" width="100%" [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" datatable  id="drills-table">
                    <thead>
                        <tr>
                            <th> Code</th>
                            <th> Name</th>
                            <th> Location</th>
                            <th> Operation Time</th>
                            <th> Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let drill of drills" >
                            <td >{{drill.code}}</td>
                            <td>{{drill.name}}</td>
                            <td>{{drill.location}}</td>
                            <td>{{drill.operation_time}}</td>
			    <td>{{drill.status}}</td>
                        </tr>
                    </tbody>
                </table>

[Korigoth]

@pktron I’ve found a way to make it work i think for you!

put everything that is in your rerender() method in a setTimeout

rerender(): void {
    setTimeout(() => {
       // put rest of the code here
    });
}

[l-lin]

It seems like nothing else than a glorified wrapper over DataTable’s API

It is just a wrapper over DataTable’s API.

what’s the point if it cannot properly rerender the data angular ngFor is generating? That destroy/create technique is hack at best.

Unfortunately, it’s been quite a time since I “touched” the frontend development (because it’s moving so fast and it’s not really my “expertise” and I don’t have much time this year), that’s why there are no improvement in this wrapper for quite some time… But, pull requests are always welcome 😃