Angular 2 this.data не определено

Question

Я пытаюсь прочитать содержимое моего файла JSON через мой "GetJsonService".

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

Просто измените ваш метод getRecords ()

Используйте его следующим образом:

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

Вместо записи в журнал после вызова метода вы должны делать это внутри успеха службы.

Это распространенная проблема, с которой сталкивается каждый разработчик на начальной стадии Angular 2+.Это асинхронный вызов.Таким образом, проблема в том, что вы console.log () выполняются до того, как вашей службе присваивается значение this.data = data; переменной.

С вашим кодом, есливы отображаете данные в HTML, это, вероятно, будет работать нормально.Просто он не будет правильно регистрироваться там, где вы запутались.

Answer 2

еще одна проблема - вы не перебрасываете асинхронное состояние .. попробуйте это:

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);
    });

})
}

Answer 3

@ MauricioSipmann решил мою проблему.Проблема заключалась в том, что код выполняется асинхронно в запросе.Я действительно знал это, но Typescript немного смутил меня.

Спасибо всем отвечающим!

Answer 4

Если вы используете Angular 6, нет необходимости конвертировать в JSON.Просто верните запрос.

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