Angular2 typescript如何获取要在模板中显示的对象属性

Thi*_*ker 5 typescript angular

我正在学习angular2和打字稿,并想知道为什么我无法访问模板中对象的属性值.

我的组件:

export class Farm{

    data:JSON;
    id: any;

    constructor(private nextService: NextService, navParams: NavParams){
        this.id = navParams.get("param1");

    }

    getFarmDetails(){

        this.data = this.nextService.fetchData(this.id)
        console.log(this.data)
    }
}
Run Code Online (Sandbox Code Playgroud)

console.log(this.data)给我的地方 Object {id: 1, name: "Leanne Graham", username: "Bret", email: "Sincere@april.biz", address: Object…}

在我的模板中,我有

<div>
    {{data}}
</div>
Run Code Online (Sandbox Code Playgroud)

在我的屏幕上输出[object Object]

我怎样才能输出电子邮件或用户名等属性?

更新:如果我喜欢{{data.email}}我收到以下错误:

在此输入图像描述

tos*_*skv 27

您可以像在javascript中一样访问这些属性.

例如:

{{data.email}} 
Run Code Online (Sandbox Code Playgroud)

如果异步检索数据,您可以使用elvis运算符吗?数据为空时避免错误.

{{data?.email}}
Run Code Online (Sandbox Code Playgroud)

  • {{data?.email}}工作得很完美!非常感谢! (3认同)