HttpClient返回json一次，然后返回undefined

Question

我正在使用HttpClient从服务器读取JSON的内容。我能够成功读取一次内容，但是当我第二次读取内容时，它总是返回undefined。

这是我的.ts的样子：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  constructor(private httpService: HttpClient) { }

  getData() {
    this.httpService.get('https://raw.githubusercontent.com/LearnWebCode/json-example/master/animals-1.json').subscribe(
          result => { 
            console.log(result)
          }
    )
  }

   ngOnInit() {
     this.getData()
     setInterval(this.getData, 10000)
   }
}

HttpClient正确导入到app.module.ts中，这是我第一次阅读JSON时可以正常使用。

这里是有问题的stackBlitz。

我使用setInterval是因为我希望能够继续读取JSON，因为值将更新。我是否打算关闭httpClient.get请求，以便我可以提出另一个请求。

我还看到了其他问题，其中请求始终返回undefined，而我的请求仅在第二个请求之后返回undefined。

如何在每次发送get请求时成功获取JSON的内容？

编辑 显然，对于某些我的stackblitz来说，这没问题，这是来自控制台的stackblitz的屏幕截图，其中包含以下问题：

Answer 1

setInterval提供的函数中的

this 不会在调用该类时指向该类。

改为使用箭头功能。

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

Answer 2

您使用过this.getData，应该是this.getData() 并且必须使用箭头功能。

尝试一下：

setInterval(() => this.getData(), 10000);

Answer 3

使用箭头功能是一个不错的选择，但是在使用setInterval时要小心。 绝对应该在Angular应用程序上下文中使用RxJS：

interval(10000).pipe(
   mergeMap(() => this.getData())
).subscribe()

错误地使用setInterval：https://dev.to/akanksha_9560/why-not-to-use-setinterval--2na9