如何在angular 2中迭代和显示json中的多个对象？

我是新来的代码2。我的问题是如何用正确的格式显示JSON格式。如图所示，结果包括我要显示的整个对象（名为Atom）。 如果JSON格式看起来像B，那么我可以使用ngFor来显示它。然而，在Json格式A中，我必须从结果显式地创建多个Atom对象，然后我可以使用NgFor显示它们。 我对Angular 2和JSON没有足够的了解，如果你对此有一些想法，你能给我一些指导吗？哪种方法是理想的解决方案

Json格式A

{
  "pageS": 25,
  "pageN": 1,
  "pageC": 2,
  "result": [
    {
      "type": "A",
      "id": "2425",
      "tree": "false"
    },
    {
      "type": "A",
      "id": "1185",
      "tree": "false"
    },
    {
      "type": "A",
      "id": "2680",
      "tree": "false"
    },
  ]
}

Json格式B

[
  {"type":"A", "id": "2425", "tree":"false"},
  {"type":"A", "id": "1185", "tree":"false"},
  {"type":"A", "id": "2680", "tree":"false"}
]

app.component.ts

import {Component} from 'angular2/core';
import {Router} from 'angular2/router';
import {AtomService} from './service/atom';
import {User} from './datatype/User';

@Component({
    selector: 'my-app',
    template: `
    <ul>
      <li *ngFor="#atom of atoms">
       {{atom.id}}
      </li>
    </ul> 
  `,
  providers: [AtomService]
})


export class AppComponent {

  atoms: Array<Atom>;

  constructor(private service : AtomService) {
    service.getAtoms().subscribe(res => this.atoms = res);
  }
}

从'angular2/core'导入{Component}；
从'angular2/Router'导入{Router}；
从“./service/atom”导入{AtomService}；
从“./datatype/User”导入{User}；
@组成部分({
选择器：“我的应用程序”，
模板：`


{{atom.id}


`,
提供者：[AtomService]
})
导出类AppComponent{
原子：阵列；
构造函数（专用服务：AtomService）{
service.getAtoms（）.subscribe（res=>this.atoms=res）；
}
}

原子服务

import { Injectable }     from 'angular2/core';
import { Http, Response } from 'angular2/http';
import 'rxjs/add/operator/map';
import {Atom} from '../datatype/Atom';

@Injectable()
export class AtomService {

  constructor(private http: Http) { 
    this.http = http;
  }

  getAtoms() {
    return this.http.get('./app/api/atoms.json')
    .map( (responseData) => {
      return responseData.json();
    })
    .map((atoms: Array<any>) => {
      let result:Array<Atom> = [];
      if (atoms) {
        atoms.forEach((atom) => {
          result.push(new Atom(atom.type, atom.id, atom.tree));
        });
      }
      return result;
    });
  }
}

从'angular2/core'导入{Injectable}；
从'angular2/Http'导入{Http，Response}；
导入'rxjs/add/operator/map'；
从“../datatype/Atom”导入{Atom}；
@可注射（）
导出类AtomService{
构造函数（专用http:http）{
this.http=http；
}
getAtoms（）{
返回此.http.get（'./app/api/atoms.json'）
.map（（响应数据）=>{
返回responseData.json（）；
})
.map（（原子：数组）=>{
让结果：数组=[]；
if（原子）{
原子。forEach（（原子）=>{
push（新原子（Atom.type、Atom.id、Atom.tree））；
});
}
返回结果；
});
}
}

我不太清楚您到底想要什么。如果不想迭代和创建新的Atom对象，可以直接从响应中读取结果

<ul>
  <li *ngFor="#atom of data.result">
   {{atom.id}}
  </li>
</ul>

{{atom.id}

---

但我认为您现在使用的方式实际上更好，因为您应该处理数据，即使您可以将HTML直接绑定到结果。

*ngFor应该在控制台中抛出一个错误，指示它只能在阵列上使用。对象A显然不是数组。是的，我理解这一点，哪种方法可以解决这个问题？