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

Question

我正在学习 angular2 和 typescript，想知道为什么我无法访问模板中对象的属性值。

我的组件：

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

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

在我的模板中有

<div>
    {{data}}
</div>

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

如何改为输出电子邮件或用户名等属性？

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

Answer 1

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

例如：

{{data.email}} 

如果数据是异步检索的，您可以使用 elvis 运算符 ?. 来避免数据为空时的错误。

{{data?.email}}