Angular 5.2.9报错TypeError：无法读取undefined的DTP_User_Admin属性

这个问题我熟！你遇到的是Angular里典型的异步数据加载导致的模板渲染时序问题，我来给你拆解一下：

问题根源 #

你的getUserData()是一个HTTP异步请求，组件初始化时会调用getLogData()发起请求，但模板渲染会先于请求响应完成。此时result还是初始的undefined，模板直接访问result.DTP_User_Admin自然就会抛出Cannot read property 'DTP_User_Admin' of undefined的错误。

至于你用console.log(this.result)能看到值，是因为浏览器控制台的对象显示有“延迟更新”特性——执行log的时候数据可能还没返回，但当你展开控制台查看时，请求已经完成，result已经被赋值了。

三种可行解决方案 #

1. 使用安全导航操作符（最简便）

直接在模板里用?.替代.，Angular会自动判断result是否存在，不存在时停止属性访问，避免报错：

<div class="row">
  <span>{{ result?.DTP_User_Admin }}</span>
</div>

2. 用*ngIf控制渲染时机

给父元素添加*ngIf="result"，确保只有当数据加载完成后才渲染对应DOM：

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

如果不想隐藏整个div，可以用<ng-container>做无DOM包裹的判断：

<ng-container *ngIf="result">
  <div class="row">
    <span>{{ result.DTP_User_Admin }}</span>
  </div>
</ng-container>

3. 初始化result为空对象

在组件里把result初始化为空对象，这样初始时访问属性不会报错，等数据返回后自动更新显示：

import { Component, OnInit } from '@angular/core';
import { UtilsService } from 'app/appservices/utils.service';
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);
  }
}

补充说明 #

三种方案各有适用场景：

• 安全导航操作符适合需要保留DOM结构、仅隐藏空内容的场景；
• *ngIf适合需要等待数据加载完成后再显示元素的场景；
• 初始化空对象适合需要避免模板报错，同时允许初始空值显示的场景。

内容的提问来源于stack exchange，提问作者YuvaMac