角度2のjsonから複数のオブジェクトを反復表示する方法は？

Question

私はコーナー2の新機能です。私の質問は、JSONフォーマットAを適切な書式で表示する方法です。示されているように、結果には、表示したいオブジェクト全体（Atomという名前）が含まれています。 JSON形式がBのように見える場合は、ngForを使って表示できます。しかし、Json形式Aでは、結果から明示的に複数のAtomオブジェクトを作成し、NgForを使用してそれらを表示する必要があります。 Angular 2とJSONについて十分な知識がありません。これについていくつかご意見がありましたら、私にこのガイドを教えてください。

JSON形式

{ 
    "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をバインドすることができていても、実際には優れていると思います。