首页 文章

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

提问于
浏览 次
1

我的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）时，subscribe返回一个有值的对象;我正在使用Angular 5.2.9

javascript angular typescript angular5

1 回答

  • 3

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

    Method 1 - 在声明 result 时指定默认值：

    result = {};

    Method 2 - 使用safe navigation operator：

    {{ result?.DTP_User_Admin }}

    Method 3 - 仅在定义 result 时使用 *ngIf 显示元素：

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

相关问题