Question

我想在Angular2中显示数据名称，年龄，地址或Angular2中的任何其他网格视图控件

[{
        "status": 1,
        "message": "Records Found",
        "data": [{
            "id": "1",
            "data": {
                "name": "Joseph",
                "age": "25",
                "Address": "Trichy",

            }
        }, {
            "id": "2",
            "data": {
                "name": "John",
                "age": "35",
                "Address": "Chennai",
            }
        }, {
            "id": "3",
            "data": {
                "name": "martin",
                "age": "25",
                "Address": "Chennai",
            }
        }]
}];

Answer 1

将您的问题json视为response

this.data = response[0].data;

<li *ngFor="let d of data">
  {{d?.name}}
  {{d?.age}}
  {{d?.Address}}
</li>

如果您的第一个数组（json）有多个对象，然后使用嵌套的ngFor

Answer 2

Pojo课程

  export class Data {
      name: string;
      age: string;
      Address: string;
  }

  export class Datum {
      id: string;
      data: Data;
  }

  export class RootObject {
      status: number;
      message: string;
      data: Datum[];
  }

在Component.ts中

export class AbcComponent implements OnInit {

    a: any;
    rootObj: RootObject = new RootObject();

    constructor() { }

    ngOnInit() {

        this.a = [{
            "status": 1,
                    "message": "Records Found",
                    "data": [{
                "id": "1",
                        "data": {
                    "name": "Joseph",
                            "age": "25",
                            "Address": "Trichy",

                }
            }, {
                "id": "2",
                        "data": {
                    "name": "John",
                            "age": "35",
                            "Address": "Chennai",
                }
            }, {
                "id": "3",
                        "data": {
                    "name": "martin",
                            "age": "25",
                            "Address": "Chennai",
                }
            }]
        }]

        this.rootObj = this.a;

        console.log(this.rootObj.data[0].data.age)

    }

}

Answer 3

在HTML中： - <table [mfData]="data[0].data" #mf="mfDataTable"> <tbody> <tr *ngFor="let item of mf.data"> <td>{{item.data.name}}</td> <td>{{item.data.Address}}</td> <td>{{item.data.age}}</td> <td>{{item.city | uppercase}}</td> </tr> </tbody> </table>

在Component.ts中： -

 `data = [{
  "status": 1,
  "message": "Records Found",
  "data": [{
  "id": "1",
  "data": {
    "name": "Joseph",
    "age": "25",
    "Address": "Trichy"
  }
}, {
  "id": "2",
  "data": {
    "name": "John",
    "age": "35",
    "Address": "Chennai"
  }
}, {
  "id": "3",
  "data": {
    "name": "martin",
    "age": "25",
    "Address": "Chennai"
  }
}]`

如何访问JSON对象包含Angular 2中的json

3 个答案: