Angular2 typescript come ottenere le proprietà dell'oggetto da visualizzare nel modello

Question

Sto imparando angular2 e typescript e mi chiedo perché non riesca ad accedere ai valori di proprietà dell'oggetto nel mio modello.

La mia componente:

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

dove console.log (this.data) mi dà Object {id: 1, name: "Leanne Graham", username: "Bret", email: "Sincere@april.biz", address: Object…}

Nel mio modello ho

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

che emette sul mio schermo come [oggetto Object]

Come posso invece produrre proprietà come email o username?

UPDATE: Se mi piace {{}} data.email ottengo seguente errore:

Answer 1

È possibile accedere a tali proprietà come si farebbe in javascript.

Ad esempio:

{{data.email}} 

Se i dati vengono recuperati in modo asincrono è possibile utilizzare l'operatore di elvis ?. per evitare gli errori mentre i dati sono nulli.

{{data?.email}}