Question

我正在尝试通过“ GetJsonService”读取JSON文件的内容。

app.component.ts：

data: any;

constructor(private jsonService: GetJsonService) {}

ngOnInit() {
    this.getRecords();
    console.log(this.data);
}

getRecords() {
    this.jsonService.getRecords().subscribe(data => {
        this.data = data;
    }, err => {
        console.log(err);
    });
}

get-json.service.ts

constructor(private http: Http) { }

data: any;

getRecords() {
    return this.http.get('assets/standorte.json').map(data => {
        this.data = data.json();
        return data.json();
    }, err => {
        if (err) {
            return err.json();
       }
     });
 }

我想将data.json（）的内容放入this.data中以使用它。但是当我记录this.data时，它是“未定义的”。

我对Angular 2和Typescript完全陌生，所以当有人帮助我时，我真的很感激。

问候

Answer 1

@MauricioSipmann解决了我的问题。问题是代码在请求中异步运行。我实际上知道这一点，但是Typescript使我有些困惑。

感谢所有响应者！

Answer 2

只需修改您的方法 getRecords（）

按如下所示使用它：

getRecords() {
    this.jsonService.getRecords().subscribe(data => {
        this.data = data;
        console.log(this.data);
    }, err => {
        console.log(err);
    });
}

您应该在服务成功内进行操作，而不是在调用方法后进行记录。

这是每个开发人员在Angular 2+的初始阶段都面临的常见问题。这是一个异步呼叫。因此，问题在于在您的服务将值 this.data = data; 分配给变量之前，您正在执行 console.log（）语句。

如果您的代码以HTML显示数据，则可能会正常工作。只是它不会正确记录您感到困惑的地方。

Answer 3

如果您使用的是angular 6，则无需转换为json。只需返回请求即可。

getRecords() {
  return this.http.get('assets/standorte.json') 
}

Answer 4

另一个问题是您不会重新引发异步状态。尝试此操作：

ngOnInit() {
    this.getRecords().then((resp)=>{
console.log(resp);
});

}

getRecords() {
return new Promise<>((resolve,reject)
 => {
   this.jsonService.getRecords().subscribe(data => {
        this.data = data;

resolve(data);
    }, err => {
        console.log(err);
reject(err);
    });

})
}

角2 this.data未定义

4 个答案: