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

Моя служба 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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
3 677
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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>

Я пробовал эти методы, ничего не привязывается в представлении html, которое он печатает только в console.info внутри функции getLogData (). Есть ли возможность получить данные перед отображением представления шаблона

YuvaMac 20.05.2018 06:41

@YuvaMac - Рад слышать, что это работает. Отметьте ответ как принятый (с зеленой галочкой).

ConnorsFan 20.05.2018 14:19

Другие вопросы по теме