Angular2 - Angular Datatable using suscribe

Question

Im trying to use Angular datatable with angular2. The code is similar to this

myArray: any;

function test() {
    callService subscribe((response) => {
        this.myArray = response['body'];
    })
    this.datatableOptions();
}

datatableOptions() {
    this.dtOptions = {
        order: [1, "desc"],
        pagingType: "full_numbers",
        pageLength: 100,
        lengthMenu: [
            [100, 150, 200, -1],
            [100, 150, 200, "Todo"]
        ],
        responsive: true,
        rowCallback: function(row, data, index) {
            var api = this.api();
            $('td:eq(0)', row).html(index + (api.page() * api.page.len() + 1));
        },
        processing: true,
        searching: true,
        deferRender: true,
        data: JSON.parse(JSON.stringify(this.myArray)),
        columns: [{
                targets: 0,
                data: null
            },
            {
                targets: 1,
                data: 'A',
                defaultContent: '-'
            },
            {
                targets: 2,
                data: 'B',
                defaultContent: '-'
            },
            {
                targets: 3,
                data: 'C',
                defaultContent: '-'
            },
        ],
    }
}

The problem: console.log(response['body']) has data, but datatable doesn´t show any data. So, what´s wrong in this code?

Riki95 · Accepted Answer · 2020-07-07 11:04:39Z

1

It is possible the function doesn't know "this". In the subscribe function, "this" is the scope of the function, not the component.

You can avoid it with this trick:


myArray: any;

function test() {
    let thisContext = this;
    callService subscribe((response) => {
        thisContext.myArray = response['body'];
    })
    this.datatableOptions();
}

So you bind the "this" scope when you enter in the test function to the thisContext variable. Inside the subscribe function, you refer to that scope with the thisContext variable.

In this way, you should find the myArray variable populated with the data.

answered Jul 7, 2020 at 11:04

Riki95

7261 gold badge8 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

El Hombre Sin Nombre Over a year ago

Mmm, return Cannot read property 'style' of undefined

Abhishek Nayek · Accepted Answer · 2020-10-14 08:59:27Z

0

Add [dtTrigger]="dtTrigger" to your table tag in html.

Import this import { Subject } from 'rxjs/internal/Subject'; to your type script and initialize dtTrigger as dtTrigger: Subject<any> = new Subject();

After you assign data this.myArray = response['body']; just add this.dtTrigger.next(); to manually re-render the data.

If this still doesn't resolve the issue then destroy the data table first and manually re-render as $('#dataTableID').DataTable().clear().destroy(); this.dtTrigger.next();

answered Oct 14, 2020 at 8:59

Abhishek Nayek

191 silver badge2 bronze badges

Collectives™ on Stack Overflow

Angular2 - Angular Datatable using suscribe

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related