Angular 5从本地JSON文件获取数据报错：[object Object]及属性读取异常

看起来你在Angular项目中处理sampledata.json数据时遇到了两个典型问题，我来帮你拆解原因并给出解决方案：

问题分析 #

先明确你遇到的两个核心问题：

1. 页面中Errors: {{sampledata}}显示为[object Object]：这是因为直接在模板中输出JavaScript对象时，默认会调用对象的toString()方法，结果就是[object Object]。
2. 调用{{sampleDataModel.Title}}时报错ERROR TypeError: Cannot read property 'Title' of undefined：这是因为你的JSON结构有多层嵌套数组，且可能在数据未加载完成时就尝试访问属性，导致找不到对应的对象。

先看你的sampledata.json结构，关键是多层嵌套的数组：

{ 
  "isSuccessfull": true, 
  "Model": [ 
    { 
      "SampleDataModel": [ 
        { "Title": "SampleData 1", "Description": "Description." } 
      ], 
      "SampleDetailModel": [ 
        { "name": "Donald Trump", "id": "111", "country": "USA" } 
      ] 
    } 
  ] 
}

注意Model和SampleDataModel都是数组（用[]包裹），这是你访问数据时容易踩坑的点。

解决方案 #

1. 先确保数据正确加载（服务与组件处理） #

首先检查你的服务代码，确保正确获取并返回JSON数据。这里是完整的服务示例：

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class SampledataService {
  constructor(private http: Http) {}

  // 返回Observable，方便组件订阅异步数据
  getSampleData(): Observable<any> {
    return this.http.get('sampledata.json')
      .map((response: Response) => response.json());
  }
}

然后在组件中订阅服务，保存数据：

import { Component, OnInit } from '@angular/core';
import { SampledataService } from './sampledata.services';

@Component({
  selector: 'app-sample',
  templateUrl: './sample.component.html'
})
export class SampleComponent implements OnInit {
  sampledata: any; // 存储从JSON获取的数据

  constructor(private sampledataService: SampledataService) {}

  ngOnInit() {
    // 订阅异步数据，确保数据加载完成后再赋值
    this.sampledataService.getSampleData()
      .subscribe(data => {
        this.sampledata = data;
        console.log(this.sampledata); // 控制台查看数据结构，方便调试
      });
  }
}

2. 解决[object Object]显示问题 #

如果你想查看完整的JSON结构，使用Angular内置的json管道，它会把对象格式化为可读的字符串：

<div>完整数据：{{ sampledata | json }}</div>

如果只想显示特定属性，直接访问对应的字段即可：

<div>请求状态：{{ sampledata.isSuccessfull }}</div>

3. 解决Cannot read property 'Title' of undefined错误 #

这里的核心是正确遍历嵌套的数组，同时处理异步加载的空值情况：

方法一：使用*ngIf确保数据存在后再渲染

<!-- 先判断sampledata是否存在，避免初始化时访问undefined -->
<div *ngIf="sampledata">
  <!-- 因为Model和SampleDataModel都是数组，需要用索引[0]访问第一个元素 -->
  <h3>标题：{{ sampledata.Model[0].SampleDataModel[0].Title }}</h3>
  <p>描述：{{ sampledata.Model[0].SampleDataModel[0].Description }}</p>
</div>

方法二：使用安全导航操作符?.（更简洁）

安全导航操作符会在属性不存在时自动停止访问，避免报错：

<h3>标题：{{ sampledata?.Model?.[0]?.SampleDataModel?.[0]?.Title }}</h3>

优化建议：用TypeScript接口定义数据类型 #

为了避免后续拼写错误或访问不存在的属性，建议定义接口来匹配你的JSON结构：

// 定义数据结构的接口
interface SampleData {
  Title: string;
  Description: string;
}

interface SampleDetail {
  name: string;
  id: string;
  country: string;
}

interface ModelItem {
  SampleDataModel: SampleData[];
  SampleDetailModel: SampleDetail[];
}

interface ApiResponse {
  isSuccessfull: boolean;
  Model: ModelItem[];
}

然后在组件和服务中使用这个接口：

// 组件中
sampledata: ApiResponse;

// 服务中修改返回类型
getSampleData(): Observable<ApiResponse> {
  return this.http.get('sampledata.json')
    .map((response: Response) => response.json() as ApiResponse);
}

这样TypeScript会帮你做类型检查，提前发现错误。

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