Angular2 setinterval

Question

我在angular2中使用setInterval，但请不要帮忙。如果我调用函数显示错误。我想以ajax更新页面数据，并使用setinterval

export class AppComponent{ 

  objMonitoring: Monitoring = new Monitoring();
  arrMonitoring: Monitoring[]=[];


  constructor(private httpService: HttpService){}

  public sampleMethodCall() {
     setInterval(function() {
       this.ngOnInit(); },4000); 
     }

  ngOnInit(){
    this.httpService.getData().subscribe((data: Response) => {
      let monitoringList = data.json();
      this.arrMonitoring = [];   
      for(let index in monitoringList){
        this.arrMonitoring.push(monitoringList[index]);
      }
   });
 }

在模板中我调用函数这段代码

 <button (click)="sampleMethodCall()">click</button>

Answer 1

您有一个ngOnInit方法但是您的课程没有实现它（它不是必需的但是很有用）。

你的课应该是这样的：

import {OnInit} from "@angular/core";

export class AppComponent implements OnInit{
...

this回调中的setInterval也未引用您的信息页。使用胖箭头来解决此问题。

setInterval(()=> {
       this.getData(); },4000); 
     }

我也真的不明白你为什么这样打ngOnInit。这是一个生命周期的钩子。它的目标是在constructor之后运行而不调用它。这就是你应该在课堂上实现的原因。

Answer 2

基本上，匿名函数和箭头函数之间的区别在于箭头函数保持对此的引用，因此如果要使用this.ngOnInit()，则需要使用箭头函数，如下所示：

setInterval(()=>{
       this.ngOnInit(); },4000); 
     }


/*setInterval(function() {
       this.ngOnInit(); },4000); //here this referes to the anonymous function
     }*/

Answer 3

从ngoninit（）中删除你的代码，并通过创建一个新函数并在构造函数中调用该函数来放置该代码。

如果setinterval不起作用，请尝试以下代码

setInterval（（）=＆gt; this.Functionname（）;}，4000）;

Answer 4

使用Observable制作池可能更好。我设置间隔有些问题。使用Observable，您可以根据需要停止合并。见代码：

import {Observable} from 'rxjs/Rx';

export class AppComponent {

objMonitoring: Monitoring = new Monitoring();
arrMonitoring: Monitoring[] = [];

constructor(private httpService: HttpService) { }

stopPooling = false;
public sampleMethodCall() {
    var timer = Observable.timer(0,5000);
    var self  = this;
    var obj = timer.subscribe(t=>{
        self.getData();
        if(self.stopPooling){obj.unsubscribe();}
    });       
}

ngOnInit() {
    this.getData();
}
        private getData(){
            var self  = this;
            this.httpService.getData().subscribe((data: Response) => {
                let monitoringList = data.json();
                this.arrMonitoring = [];   
                for(let index in monitoringList){
                    this.arrMonitoring.push(monitoringList[index]);
                }
            }, (error) => {
                self.stopPooling = true;
            });
        }

}

Answer 5

您已经尝试过吗？

import { interval } from 'rxjs';

// Create an Observable that will publish a value on an interval
const secondsCounter = interval(1000);
// Subscribe to begin publishing values
secondsCounter.subscribe(n => {
  console.log(`It's been ${n} seconds since subscribing!`); 
  this.runMyMethod()
});

更多内容：https://angular.io/guide/rx-library

Answer 6

您可以使用以下更改执行相同操作：

export class AppComponent{ 

  objMonitoring: Monitoring = new Monitoring();
  arrMonitoring: Monitoring[]=[];


  constructor(private httpService: HttpService){}

  public sampleMethodCall() {
     let that = this;
     setInterval(() => {
       that.getData(); 
     }, 4000); 
  }

  ngOnInit(){
    this.getData();
  }

  private getData(){
    this.httpService.getData().subscribe((data: Response) => {
      let monitoringList = data.json();
      this.arrMonitoring = [];   
      for(let index in monitoringList){
        this.arrMonitoring.push(monitoringList[index]);
      }
    });
  }
}

此外，您可以使用RxJS interval代替setInterval方法。