角度4 |更改阵列检测 [英] Angular 4 | Change detection of an array

问题描述

如何更新阵列或不更新阵列?我的数据来自API.

How can i manage my array when it is updated or not? my data came from an API.

我将间隔设置为每10秒，这样它将把数据恢复到一个新的间隔.

I set interval for every 10 seconds so it will get data to a new one.

counter = 10;
ngOnInit() {
    this.getVoicepickData();
    // subscribe to API data every 10 seconds
    this.apiTimer = setInterval(() => { 
        this.getVoicepickData();
    }, (this.counter*1000));  
}

getData(){
    // set headers [token]
    let headers = new Headers({
        'token': "My TOKEN",
        'Content-Type': 'application/json'
    });
    let options: RequestOptions = new RequestOptions({ headers: headers });
    return this.http.get('http://api.com/mydata/', options)
        .map((res: Response) => res.json())
}

//subscribe to API Data
getVoicepickData() {
    this.showLoader();
    this.getData().subscribe(data => {
        this.data = data

        //distribute the api data according to what zone they belong, for ease in manipulatation of data
        for(let mydata of this.data){
            if (mydata.Zone == 1) {
                this.zoneOne.push(mydata);

            }
            if (mydata.Zone == 2) {
                this.zoneTwo.push(mydata);

            }
            if (mydata.Zone == 3) {
                this.zoneThree.push(mydata);

            }
            if (mydata.Zone == 4) {
                this.zoneFour.push(mydata);

            }
            if (mydata.Zone == 5) {
                this.zoneFive.push(mydata);

            }
            if (mydata.Zone == 6) {
                this.zoneSix.push(mydata);

            }
            if (mydata.Zone == 7) {
                this.zoneSeven.push(mydata);

            }
            if (mydata.Zone == 8) {
                this.zoneEight.push(mydata);

            }
        }
        this.hideLoader();
    },
    () => {
        console.log('Error');
    },
    () => {
        console.log('Complete');
    }
    );
}

我想知道在发生更改时如何管理我的api数据吗?就像触发器一样，如果我的数据有新记录，它将把我的旧数组替换为具有最新记录的新数组.

I want to know how can i manage my api data when there is changes on it? like trigger if my data has new record it will replace my old array to a new one with the latest record on it.

但是在我上面的代码中，每次出现间隔时，它只会不断推送api数据，并在屏幕上显示重复的数据.

But in my above code, it just keep pushing the api data everytime my interval occur and get repeated data displayed on my screen.

如果是新记录还是没有新记录，我如何实现类似先评估api数据的功能，如果有新记录，则只需更新我的数组即可.

how can i achieve something like evaluating first my api data if ther is a new record or none, and if it has a new record it simply update my array.

推荐答案

手动运行更改检测

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  (...)
})
export class MyComponent {
  constructor(private change:ChangeDetectorRef) {
  }

  myMethod() {
    this.change.detectChanges();
  }
}

有关 Change Detection

这篇关于角度4 |更改阵列检测的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！