Угловой массив остается неопределенным при передаче данных JSON - PullRequest
Новая
       10

Угловой массив остается неопределенным при передаче данных JSON

0 голосов
/ 24 июня 2019

У меня есть API, который возвращает данные JSON о футболе.Затем данные передаются во внешний интерфейс (угловой), но при передаче в массив массив все еще остается неопределенным.

Данные 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>

1 Ответ

1 голос
/ 24 июня 2019

Http-запросы возвращают Observable на 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"

...