Question

如何在更新数据时管理我的数组？我的数据来自API。

我每隔10秒设置一次间隔，这样就可以获得新的数据。

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数据？比如触发器，如果我的数据有新的记录，它会将我的旧数组替换为带有最新记录的新数组。

但是在上面的代码中，每次我的间隔发生时它都会继续推送api数据，并在屏幕上显示重复的数据。

我怎样才能实现像首先评估我的api数据，如果是新记录或没有记录，如果它有新记录，它只是更新我的数组。

Answer 1

手动运行更改检测

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

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

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

更多关于Change Detection

Angular 4 |更改阵列的检测

1 个答案: