Question

我是代码Angular 2的新手。我的问题是如何使用正确的格式显示JSON格式A.如图所示，结果包括我想要显示的整个对象（名为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);
  }
}

atom.service

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

Answer 1

我不确定我明白你到底想要什么。如果您不想迭代并创建新的Atom对象，则可以直接从响应中读取结果。

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

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

如何在角度2中迭代并显示json中的多个对象？

1 个答案: