Angular 5-從本地JSON文件[對象Object]獲取數據時出錯

Question

我正在嘗試從sampledata.json獲取數據

錯誤：

1. {{sampledata}}顯示[object Object]
2. {{sampleDataModel.Title}}錯誤TypeError：無法讀取未定義的屬性“ Title”

sampledata.json：

  {
    "isSuccessfull": true,
    "Model": [
        {
            "SampleDataModel": [ 
                {
                  "Title": "SampleData 1",
                  "Description": "Description."
                }
            ],

            "SampleDetailModel": [
            {
                "name": "Donald Trump",
                "id": "111",
                "country": "USA"
            }
           ]
        }
      ]
    }

sampledata.services.ts：

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


    @Injectable()
    export class SampledataService {

      private _url = 'assets/data/sampledata.json'

      constructor(private _http: Http) { }

      getData(){

        return this._http.get(this._url)
          .map((resSampleData: Response) => resSampleData.json());
      }

    }

sampledata.component.ts：

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

@Component({
  selector: 'app-sampledata',
  templateUrl: './sampledata.component.html',
  styleUrls: ['./sampledata.component.css']
})
export class SampledataComponent implements OnInit {

  sampledata = [];
  sampleDataModel = [];
  sampleDetailModel = [];

  constructor(private _sampledataservice: SampledataService) { }

  ngOnInit() {  

    this._sampledataservice.getData()
      .subscribe(resData => { 
        this.sampledata = resData;
        this.sampleDataModel = resData.Model.SampleDataModel;
        this.sampleDetailModel = resData.Model.SampleDetailModel });

  }

}

sampledata.component.html：

<h3>{{sampledata}}</h3>
<p>{{sampleDataModel.Title}}</p>
<p>{{sampleDetailModel.name}}</p>

我的問題是：

如何顯示這些值？

如果您對解決此問題有任何想法，請幫助向我建議解決方案，謝謝。

Answer 1

<h3>{{sampledata | json}}</h3> // pipe | json needed to show object as stringyfied
<p>{{sampleDataModel[0]?.Title}}</p> // ? to check if object is not null or undefined
<p>{{sampleDetailModel[0]?.name}}</p>

並如下所示進行更改

this.sampledata = resData;
this.sampleDataModel = resData.Model[0].SampleDataModel;
this.sampleDetailModel = resData.Model[0].SampleDetailModel

Answer 2

也許您應該嘗試以下操作：在ngOnInit中獲取數據時：

this._sampledataservice.getData()
    .subscribe(resData => { 
    this.sampledata = resData;
    this.sampleDataModel = resData.Model[0].SampleDataModel;
    this.sampleDetailModel = resData.Model[0].SampleDetailModel });

...以及HTML：

<h3>{{sampledata}}</h3>
<p>{{sampleDataModel[0].Title}}</p>
<p>{{sampleDetailModel[0].name}}</p>

Answer 3

根據OP中的代碼很少觀察到：

1. 訪問SampleDataModel

   要訪問SampleDataModel屬性，它應該是resData.Model[0].SampleDataModel而不是resData.Model.SampleDataModel 。

2. {{sampleDataModel.Title}}錯誤TypeError：無法讀取未定義的屬性“ Title”

   訪問SampleDataModel數組的Title屬性。 應該是{{sampleDataModel[0].Title}}而不是{{sampleDataModel.Title}} 。

    this.sampleDataModel = resData.Model[0].SampleDataModel; 

3. {{sampledata}}顯示[object Object]

   由於sampledata是JSON對象，因此顯示為[object object] 。 在模板中使用之前對其進行Stringify 。

    this.sampledata = JSON.stringify(resData);