Angular 数组在传递 JSON 数据时保持未定义

Question

我有一个 API returns JSON 关于足球的数据。然后将数据传递给前端 (angular)，但在将其传递给数组时，数组仍未定义。

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",

这是angular代码解析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.logx传入subscribe时，返回JSON信息。所以直到 x 部分它传递得很好但是当它传递到 resultArray 和 console.log 那部分时，它返回 undefined。不知道有没有人可以帮忙。

这是型号：

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

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

<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 请求 return 可在 Angular 上观察到。 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"

Angular 数组在传递 JSON 数据时保持未定义

Angular array remains undefined when passing JSON data

api

json

undefined

angular