Angular2 typescript как получить свойства объекта для отображения в шаблоне

Question

Я изучаю 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) 
    } 
} 

где console.log (this.data) дает мне Object {id: 1, name: "Leanne Graham", username: "Bret", email: "Sincere@april.biz", address: Object…}

В моем шаблоне у меня есть

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

, который выводит на моем экране [объект Объект]

Как я могу вместо этого вывести такие свойства, как электронная почта или имя пользователя?

UPDATE: Если я люблю {{data.email}} Я получаю следующее сообщение об ошибке:

Answer 1

Вы можете обращаться к этим свойствам, как вы бы в JavaScript.

Например:

{{data.email}} 

Если данные извлекаются асинхронно вы можете использовать оператор Элвиса ?., чтобы избежать ошибок, пока данные не равны нулю.

{{data?.email}}