如何在角度版本2.4.10中显示JSON数据

Question

I am trying to show json data by Angular. But it is showing entire json data instead particular one.

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

output:

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

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

{{t.tname}}, this fragment of code showing nothing.

Below is my server side code :

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

}

Now i want to know that how can i show only data instead of the full json object.

Case 2 :

Below is my REST controller :

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

Angular code :

@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

For case two i am getting the below error message :

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

After showing this error message it is printing the below lines :

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

So my question is, according to the error message if 't' is undefined then how it is being printed in console log.

Update : I got solution for case 1, i have to use {{tt}}

Answer 1

根据您的代码，它应该是{{tt}}，而不是{{t.tname}}