Javascript 如何在angular版本2.4.10中显示JSON数据

我试图通过角度来显示json数据。但它显示的是整个json数据，而不是特定的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.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:

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

下面是我的REST控制器：

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

角度代码：

@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

显示此错误消息后，将打印以下行：

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

所以我的问题是，根据错误消息，如果“t”未定义，那么如何在控制台日志中打印它

---

更新：我得到了案例1的解决方案，我必须使用{{t.t}

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

哪个特定版本的angular？根据你的代码，我认为应该是{t.t}我的angular version是2.4.10如果你有任何错误，请检查浏览器控制台。t、 tname将不起作用，因为从服务返回的数据中没有名为tname的键。尝试使用t.t。它会起作用。第一个t代表对象，正如您在[{“t”：“A”}，{“t”：“B”}，{“t”：“C”}中所看到的，因此它在第一次迭代中有{“t”：“A”}，所以为了从这个对象访问“A”，您必须在第一个t上使用.t，因此=>t

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