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: "[e-mail]", address: Object…}

在我的模板中，我有

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

这段代码在我的屏幕上输出为 [object Object]。

我该如何输出像电子邮件或用户名等属性？

更新：如果我像 {{data.email}} 这样做，我会得到以下错误：

- Thinker

Answer 1

你可以像在Javascript中一样访问这些属性。

例如：

{{data.email}} 

如果数据是异步检索的，您可以使用Elvis操作符?.来避免当数据为 null 时出现错误。

{{data?.email}}

- toskv

---

我尝试过了，但是它抛出了错误：原始异常：TypeError: 无法读取未定义的属性“email” - Thinker

谢谢！你刚刚帮我省了另一个小时来调试问题和自责。"Elvis"运算符有时也被称为"安全导航运算符"。 - sofly

@SoFLy，这就是 Stack Overflow 的用途。 :) - toskv