角 4 |数组的变化检测答案

【问题标题】：Angular 4 | Change detection of an array角 4 |数组的变化检测
【发布时间】：2021-11-17 15:12:19
【问题描述】：

我如何管理我的阵列是否更新？我的数据来自 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 数据，如果它有新记录，它只需更新我的数组。

【问题讨论】：

听起来你想实现一个可观察的angular-2-training-book.rangle.io/handout/observables
是的，类似的。我发现了一些 EventEmitter，但我的数组来自 API。我只是不知道如何评估它何时有变化。
您是在问如何进行深度数组比较？如果是这样，我强烈建议您找到其他方法。深度数组比较非常有问题。
@JydonMah 你订阅了 observable，然后实现一个回调，当 observable 更新时会自动触发。因此，您所要做的就是触发变量的更新，这将贯穿始终。
或者你也可以做的是手动推送更改检测策略，当推送数据时，你可以在该方法中触发 Angular 的更改检测

标签： angular

【解决方案1】：

手动运行更改检测

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

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

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

更多关于Change Detection

【讨论】：

感谢 rahul，但我如何在循环中使用它？很抱歉问这个问题，但我仍然对 changedetector 的工作原理感到困惑？我如何将它应用到我的循环中？特别是当我推送我的数据时 this.zoneOne.push(mydata);
每次推送后只需添加更改检测尝试相同
还是不行。我添加 this.change.detectChanges();在我推送我的数据之后。

【解决方案2】：

使用以下代码代替推送：

this.zoneOne = [...this.zoneOne, mydata]
this.zoneTwo = [...this.zoneTwo, mydata]

【讨论】：