Моя служба utils, которая возвращает данные из базы данных mysql с помощью экспресс-фреймворка
import { Injectable } from '@angular/core';
import { Http, HttpModule, Headers, RequestOptions } from '@angular/http';
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
@Injectable()
export class UtilsService implements OnInit{
public authData : any[];
constructor(private http : Http) {
}
ngOnInit() { }
getUserData() {
const reqData = JSON.parse(localStorage.getItem('AuthUser'));
return this.http.post('/get/logindata',reqData)
.map(result => result.json().data);
}
}
Мой раздел компонентов
import { Component, OnInit } from '@angular/core';
import { UtilsService } from 'app/appservices/utils.service';
// Subscribers and mapping to get resutl
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit{
result : any;
constructor(private utils : UtilsService) {
this.getLogData();
}
ngOnInit() {}
getLogData() {
this.utils.getUserData().subscribe(res=> this.result = res);
}
}
HTML-просмотр
<div class = "row">
<span>{{ result.DTP_User_Admin }}</span>
</div>
Когда я когда-либо пытался связать данные в html, он дает
ERROR TypeError: Cannot read property 'DTP_User_Admin' of undefined.
Но подписка возвращает объект со значением, когда я использую console.info (this.result); я использую Angular 5.2.9



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Сервис возвращает данные асинхронно. Шаблон отображается до того, как данные станут доступны, и ошибка возникает при попытке доступа к result.DTP_User_Admin, когда result все еще не определен. Вот несколько возможных решений:
Способ 1 - присвоить значение по умолчанию при объявлении result:
result = {};
Способ 2 - Используйте оператор безопасной навигации:
{{ result?.DTP_User_Admin }}
Способ 3 - использовать *ngIf для отображения элемента, только если result определен:
<span *ngIf = "result">{{ result.DTP_User_Admin }}</span>
@YuvaMac - Рад слышать, что это работает. Отметьте ответ как принятый (с зеленой галочкой).
Я пробовал эти методы, ничего не привязывается в представлении html, которое он печатает только в console.info внутри функции getLogData (). Есть ли возможность получить данные перед отображением представления шаблона