Angular2 - Iterable Differ doesn't detect change

Question

I'm using iterable Differs from Angular2 to detect changes on my data. Then I want to reload my view. But the differ.diff always returns "null" and I don't know why.

constructor(differs: IterableDiffers) {
    this.differ = differs.find([]).create(null);
}

@Input() data: any;

ngDoCheck() {
    var changes = this.differ.diff(this.data.datasets);
    if (changes && this.initialized) {
       //doreload
    }

EDIT:

this.pingService.pingStream.subscribe(ping => {
                  this.ping = ping;
                  console.log(this.ping);
                  NTWDATA.datasets[0].data.shift();
                  NTWDATA.datasets[0].data.push(this.ping);

PingService returns a number every 5secs(pinging my server). shift/push thingy works fine, data is there. It just doesn't get detected. NTWDATA:

{
    labels: ["","","","","","",""],
    datasets: [
        {
            label: 'Server Response Time in ms',
            data: [65, 59, 80, 81, 56, 55, 40],
            fill: false,
            borderColor: '#FF0303'
        }
    ]
}

Answer 1

It depends on what you want to detect. With the IterableDiffers class, you will "only" detect if:

• elements are added in your array
• elements are removed from your array

But it won't detect if updates are done within elements of your array.

This question could interest you:

• Detect changes in objects inside array in Angular2

See this plunkr for the use case: https://plnkr.co/edit/wn6mTEcvrW2vh1ko5Ji5?p=preview.