Ошибка 5 типа Angular: невозможно прочитать свойство undefined

Question

Мой сервис утилит, который возвращает данные из базы данных 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.log (this.result);использую Angular 5.2.9

Answer 1

Служба возвращает данные асинхронно.Шаблон отображается до того, как данные становятся доступными, и возникает ошибка при попытке доступа к result.DTP_User_Admin, пока result все еще не определено.Вот несколько возможных решений:

Метод 1 - Назначить значение по умолчанию при объявлении result:

result = {};

Метод 2 -Используйте оператор безопасной навигации :

{{ result?.DTP_User_Admin }}

Метод 3 - Используйте *ngIf для отображения элемента только тогда, когда определено result:

<span *ngIf="result">{{ result.DTP_User_Admin }}</span>