传递 JSON 数据时，角度数组仍未定义

Question

我有一个返回有关足球的 JSON 数据的 API。然后将数据传递给前端（角度），但是当将其传递给数组时，数组仍然未定义。

JSON 数据：

match_id":"194200",
"country_id":"41",
"country_name":"England",
"league_id":"148",
"league_name":"Premier League",
"match_date":"2019-04-01",
"match_status":"Finished",
"match_time":"21:00",
"match_hometeam_id":"2617",
"match_hometeam_name":"Arsenal",
"match_hometeam_score":"2 ",
"match_awayteam_name":"Newcastle",
"match_awayteam_id":"2630",
"match_awayteam_score":" 0",

这是解析JSON数据并放入数组中显示的角度代码：

export class ResultComponent implements OnInit {

searchFilter: string;
resultArr: FootballModel[];

constructor(private footballService: FootballService, private route: 
ActivatedRoute) {}

ngOnInit() {
   this.footballService.getResults().subscribe(x => this.resultArr = x);
   console.log(this.resultArr);
}

当我 console.log 订阅传入的 x 时，返回 JSON 信息。所以直到 x 部分它通过良好，但是当它传递给 resultArray 和 console.log 该部分时，它返回undefined。想知道是否有人可以提供帮助。

这是模型：

export class FootballModel {
  countryName: string;
  leagueName: string;
  matchDate: string;
  matchHomeTeamName: string;
  matchAwayTeamName: string;
  matchHomeTeamScore: string;
  matchAwayTeamScore: string;
}

编辑： 我也试图在表格中显示该数据，但不知何故它没有显示。很确定这也是一个容易犯的错误。

<tbody>
 <tr *ngFor="let result of results">
    <td>{{result.countryName}}</td>
    <td>{{result.leagueName}}</td>
    <td>{{result.matchDate}}</td>
    <td>{{result.homeTeam}}</td>
    <td>{{result.awayTeam}}</td>
    <td>{{result.homeTeamScore}}</td>
    <td>{{result.awayTeamScore}}</td>
 </tr>

Answer 1

Http 请求在 Angular 上返回 Observable。 Observables 具有异步回调函数，您可以通过订阅它来获取数据。但是，当您尝试在 .subscribe 至少工作一次之前访问回调函数之外的数据时，它必须是未定义的。因为它在您的 API 发送响应之前写入控制台。如果您像这样更改您的 ngOnInit 函数，它必须工作。

ngOnInit() {
   this.footballService.getResults().subscribe(x => {
      this.resultArr = x;
      console.log(this.resultArr);
   });  
}

同时查看Observables 的文档

下面是这个案例的另一个例子：

ngOnInit() {
   console.log("a");
   this.footballService.getResults().subscribe(x => {
      console.log("c");
      this.resultArr = x;
      console.log(this.resultArr);
   });
   console.log("b");
}

控制台上的预期结果是

“a”“b”“c”