Question

我正在尝试学习如何从api获取JSON数据，解析并将其映射到我的类型，然后将其显示在有角度的材质数据表中。但是，当我检查控制台输出时，它会将值显示为未定义。我什至没有创建数据表。

谁能告诉我我要去哪里错了？我正在使用Angular 6.1.0：

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from '../../node_modules/rxjs';    

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})


export class AppComponent {
  title = 'NgTable';
  myPlace = "https://jsonplaceholder.typicode.com/posts";  
  myPosts: Observable<posts[]>;  
  myPostArr: posts[];

  constructor(http: HttpClient){
    this.myPosts = http.get<posts[]>(this.myPlace);
    this.myPosts.subscribe(response => {this.myPostArr = response});

    console.log(this.myPostArr);
  }
}

export interface posts {
  userId: number;
  id: number;
  title: string;
  body: string;
}

console.log的

输出为： undefined

Answer 1

由于可观察的异步特性，this.myPostArr在某个时间点获取数据因此，在subscribe块之外，该行执行时将无法解决。

我建议您将所有http方法放入服务中并返回Observables。

constructor(http: HttpClient){
    this.myPosts = http.get<posts[]>(this.myPlace);
    this.myPosts.subscribe(response => {this.myPostArr = response;

    console.log(this.myPostArr);
});
}

尝试在Angular 6中检索和映射JSON数据时，控制台输出显示“ undefined”

1 个答案: