角度バージョンでJSONデータを表示する方法2.4.10

Question

jsonデータをAngularで表示しようとしています。しかし、それは特定のものの代わりにjsonデータ全体を表示しています。

ケース1：

import { Component, OnInit } from '@angular/core'; 
import { HttpService } from 'app/http.service'; 
import { Response } from '@angular/http/src/static_response'; 

@Component({ 
    selector: 'app-httpapp', 
    template: ` 
    <p> 
     httpapp Works! 
     <br><hr> 
     {{t_obj | json}} 
    </p> 


    <div *ngFor="let t of t_obj"> 
     {{t.tname}}//not working 
     {{t}} 
    </div> 
    `, 
}) 
export class HttpappComponent implements OnInit { 

    t_obj : T ; 

    constructor(private httpService : HttpService) { } 

    ngOnInit() 
    { 
    this.httpService.getData() 
    .subscribe(
     (data : Response) => { 
     this.setData(data) 
     } 
    ); 
    } 



    setData(response : Response) 
    { 
     this.t_obj = response.json(); 
     console.log(response.json()); 

    } 
}//class 

class T{ 
    tname : string; 
} 

出力：

[ { "t": "A" }, { "t": "B" }, { "t": "C" } ] 

[object Object] 
[object Object] 
[object Object] 

{{t.tname}}、何も示さない、このコード断片。以下は

は私のサーバー側のコードです：

@RestController 
public class NewClass 
    { 

    @RequestMapping("/greeting") 
    public List greeting() 
     { 
     List l = new ArrayList(); 
     l.add(new T("A")); 
     l.add(new T("B")); 
     l.add(new T("C")); 
     return l; 
     } 

    }//public class NewClass 

class T 
{ 
    public String t; 

    public T(String t) 
     { 
     this.t = t; 
     } 

} 

今私はどのように私の代わりに、完全なJSONオブジェクトのデータだけを表示することができることを知ってほしいです。

ケース2：

：私は以下のエラーメッセージを取得していた場合2の場合

@Component({ 
    selector: 'app-httpapp', 
    template: ` 
    <p> 
     httpapp Works! 
     <br><hr> 
     {{t_obj.t}} 
    </p> 
    `, 
}) 
export class HttpappComponent implements OnInit { 

    t_obj : any ; 

    constructor(private httpService : HttpService) { } 

    ngOnInit() 
    { 
    this.httpService.getData() 
    .subscribe(
     (data : Response) => { 
     this.setData(data) 
     } 
    ); 
    } 

    setData(response : Response) 
    { 
     this.t_obj = response.json(); 
     console.log(response.json()); 
     console.log(this.t_obj.t); 

    } 
}//class 

：

@RequestMapping("/greeting") 
public T greeting() 
    { 
    return new T("Done..!"); 
    } 

角度コード：以下

は私のRESTコントローラであります

EXCEPTION: Uncaught (in promise): Error: Error in ./HttpappComponent class HttpappComponent - inline template:3:14 caused by: Cannot read property 't' of undefined 
Error: Error in ./HttpappComponent class HttpappComponent - inline template:3:14 caused by: Cannot read property 't' of undefined 

0このエラーメッセージを表示した後に、以下の行を印刷している：

{t: "Done..!"} 
Done..! 

だから私の質問は、エラーメッセージに従って「t」は、それがコンソールログに印刷されて、その後どのように定義されていない場合。

アップデート：私はケース1のためのソリューションを持って、私はあなたのコードごとに{{TT}}

Answer 1

を使用する必要があり、それは{{TT}}であるべきではなく、{{t.tname}}