角度2 - JSON（TypeScript）から値を出力できません

Question

角度2で* ngForを使用してリストを出力しようとしていますが、実際に画面上に何かを得る唯一の方法は、私は私が印刷されます。この

<li *ngFor="let node of nodes">{{node.title}}</li> 

ような何かを行う場合

<li *ngFor="let node of nodes">{{node | json}}</li> 

はもちろん、すべてのJSON

を返します[オブジェクトのオブジェクト]

これは

import { Component, OnInit } from '@angular/core'; 
import 'rxjs/add/operator/toPromise'; 
import { Injectable } from '@angular/core'; 
import {Http, Headers, Response} from '@angular/http'; 


@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 


export class AppComponent implements OnInit{ 

    getData: string; 
    postData: string; 
    nodes = [{title : "basic page 1", content: "test page in Drupal 8 ..."}, {title : "basic page 2", content: "Another page in Drupal 8 ..."}]; 

constructor(private http: Http) { 
} 

ngOnInit() { 

    this.http.get("http://the-server.co.uk/rest/export/json/basic"). 
     toPromise().then(r => r.json()).then(r => this.nodes = r); 
     } 
} 

どのように見えるか、私のapp.component.tsこれは私のオブジェクトがコンソールに見ているかです。

ありがとうございました！

Answer 1

あなたのレスポンスオブジェクトがタイプ配列（array[1]）の「タイトル」を持っているように見えるので、が表示されています。 titleを展開してテンプレートに入れることができます。あなたは約束のコールバックでJSON.parse（R）にしたくないのはなぜ

{{node.title."titiledummy"}} 

http://plnkr.co/edit/a9k3wDbaKFIfYqWgf78x?p=preview

import { Component, OnInit } from '@angular/core'; 


@Component({ 
    selector: 'my-app', 
    template: `<li *ngFor="let node of nodes">{{node.title[0].key}}</li>` 
}) 


export class AppComponent implements OnInit{ 

    private nodes = [{title : "basic page 1", content: "test page in Drupal 8 ..."}, {title : "basic page 2", content: "Another page in Drupal 8 ..."}]; 

constructor() { 
} 

ngOnInit() { 
this.nodes = [{title : [{'key':"basic page 1"}], content: "test page in Drupal 8 ..."}, {title : [{'key':"basic page 2"}], content: "Another page in Drupal 8 ..."}]; 

}