时间戳

首页 > 解决方案 > Angular 5 TypeError：无法读取未定义的属性

javascript - Angular 5 TypeError：无法读取未定义的属性

问题描述

我的 utils 服务使用 express 框架从 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

标签： javascriptangulartypescriptangular5

解决方案

服务异步返回数据。模板在数据可用之前显示，并且在尝试访问时发生错误，result.DTP_User_Admin而result仍然未定义。以下是一些可能的解决方案：

方法 1 - 声明时分配默认值result：

result = {};

方法 2 - 使用安全导航运算符：

{{ result?.DTP_User_Admin }}

方法 3 -仅在定义*ngIf时用于显示元素：result

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

推荐阅读