Javascript Angular 5-从本地JSON文件[object]获取数据时出错

我正在尝试从sampledata.json获取数据

错误：

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

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

    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());
      }

    }

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 });

  }

}

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

{{sampledata}}

显示

[object object]

{{sampleDataModel.Title}

错误类型错误：无法读取未定义的属性“Title”

sampledata.json:

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

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

    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());
      }

    }

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 });

  }

}

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

sampledata.services.ts:

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

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

    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());
      }

    }

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 });

  }

}

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

sampledata.component.ts:

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

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

    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());
      }

    }

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 });

  }

}

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

sampledata.component.html:

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

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

    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());
      }

    }

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 });

  }

}

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

{{sampledata}
{{sampleDataModel.Title}

{{sampleDetailModel.name}

我的问题是：

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

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

    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());
      }

    }

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 });

  }

}

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

如何显示这些值

如果你们中有人对如何解决这个问题有任何想法，请帮助向我建议解决方案，谢谢。

也许你们应该试试这个： 在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>

{{sampledata}
{{sampleDataModel[0].Title}

{{sampleDetailModel[0].name}

也许你应该试试这个： 在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>

{{sampledata}
{{sampleDataModel[0].Title}

{{sampleDetailModel[0].name}

根据OP:

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

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

    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());
      }

    }

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 });

  }

}

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

访问采样数据模型

要访问

SampleDataModel

属性，它应该是

resData.Model[0]。SampleDataModel

，而不是

resData.Model.SampleDataModel

{{sampleDataModel.Title}错误类型错误：无法读取属性 未定义的“标题”

访问

SampleDataModel

数组的

Title

属性。它应该是

{{sampleDataModel[0].Title}

，而不是

{{sampleDataModel.Title}

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

{{sampledata}}显示[对象]

因为

sampledata

是一个JSON对象，它显示为

[object object]

<代码>字符串化在模板中使用之前对其进行字符串化

this.sampledata = JSON.stringify(resData);

---

根据OP:

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

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

    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());
      }

    }

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 });

  }

}

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

访问采样数据模型

要访问

SampleDataModel

属性，它应该是

resData.Model[0]。SampleDataModel

，而不是

resData.Model.SampleDataModel

{{sampleDataModel.Title}错误类型错误：无法读取属性 未定义的“标题”

访问

SampleDataModel

数组的

Title

属性。它应该是

{{sampleDataModel[0].Title}

，而不是

{{sampleDataModel.Title}

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

{{sampledata}}显示[对象]

因为

sampledata

是一个JSON对象，它显示为

[object object]

<代码>字符串化在模板中使用之前对其进行字符串化

this.sampledata = JSON.stringify(resData);

---

在整个对象上尝试console.log。您将看到sampledata.json具有模型数组（非对象），在该数组中SampleDataModel和SampleDetailModel也是数组非对象。是的，如何将其转换为对象？在整个对象上使用*ngFor looptry console.log。您将看到sampledata.json具有模型数组（而非对象），在该数组中SampleDataModel和SampleDetailModel也是数组而非对象。是的，如何将其转换为对象？通过使用*ngFor循环{{sampledata | json}可以工作。谢谢除了在html上添加“| json”之外，还有更好的方法吗 {{sampleDataModel？.Title}

{{sampleDetailModel？.name}}

没有逐个显示属性，现在我得到“错误类型错误：无法读取未定义的属性“0”。还有我是如何在service.ts或组件中严格执行的？首先尝试使用

{{sampleDataModel | json}

&

{{sampleDetailModel | json}

它只显示了“&”。没有控制台错误@vinayakj{{sampledata}json}起作用。谢谢除了在html上添加“| json”之外，还有更好的方法吗 {{sampleDataModel？.Title}

{{sampleDetailModel？.name}}

没有逐个显示属性，现在我得到“错误类型错误：无法读取未定义的属性“0”。还有我是如何在service.ts或组件中严格执行的？首先尝试使用

{{sampleDataModel | json}

&

{{sampleDetailModel | json}

它只显示了“&”。没有控制台错误@vinayakjThank you。这起作用了。最后一个问题。使用模型[0]或sampleDataModel[0]好吗？以后我可能会再添加一些数据。我通常做的是创建一个强类型模型，将其与服务器上的数据进行映射，并将其绑定到视图，然后一直尝试不直接在html中使用[0]或类似的内容。希望有帮助。我该怎么做？谢谢。这起作用了。最后一个问题。使用模型[0]或sampleDataModel[0]好吗？以后我可能会再添加一些数据。我通常做的是创建一个强类型模型，将其与服务器上的数据进行映射，并将其绑定到视图，然后一直尝试不直接在html中使用[0]或类似的内容。希望有帮助。我该怎么做？