Come visualizzare una rappresentazione JSON e non [Object Object] sullo schermo

Question

Sto creando un'applicazione AngularJS 2 con la versione beta. Voglio mostrare una rappresentazione JSON di un oggetto nella mia pagina, ma dimostra [Object Object] e non {key1:value1 ....}

dal componente posso usare:

get example() {return JSON.stringify(this.myObject)}; 

e poi nel modello:

{{example}} 

ma se ho una matrice di oggetti e vorrei stampare un elenco di questi oggetti, come posso farlo?

Usando:

<ul> 
    <li *ngFor="#obj of myArray">{{obj}}</li> 
</ul> 

risultati in qualcosa di simile:

 
- [Object Object] 
- [Object Object] 
- [Object Object] 
- [Object Object] 

e così via. C'è un modo per visualizzare quelli come JSON?

Answer 1

Se volete vedere quello che hai dentro un oggetto nel web app, quindi utilizzare il tubo JSON in un modello HTML componente, ad esempio:

<li *ngFor="let obj of myArray">{{obj | json}}</li> 

Testato e valido utilizzando angolare 4.3.2.

Answer 2

Ci sono 2 modi in cui è possibile ottenere i valori: -

1. accedere alla proprietà dell'oggetto usando la notazione punto (obj.property).
2. Accedere alla proprietà dell'oggetto passando in valore chiave per esempio obj [ "proprietà"]

Answer 3

<li *ngFor="let obj of myArray">{{obj | json}}</li> 

Answer 4

Aggiornamento risposte degli altri con la nuova sintassi:

<li *ngFor="let obj of myArray">{{obj | json}}</li> 

Answer 5

contenuti oggetto di dumping come JSON può essere raggiunto senza usare ngFor. Esempio:

oggetto

export class SomeComponent implements OnInit { 
    public theObject: any = { 
     simpleProp: 1, 
     complexProp: { 
      InnerProp1: "test1", 
      InnerProp2: "test2" 
     }, 
     arrayProp: [1, 2, 3, 4] 
    }; 

Markup

<div [innerHTML]="theObject | json"></div> 

uscita (attraversava un beautifier per una migliore leggibilità, altrimenti viene emesso in una singola fila)

{ 
    "simpleProp": 1, 
    "complexProp": { 
    "InnerProp1": "test1", 
    "InnerProp2": "test2" 
    }, 
    "arrayProp": [ 
    1, 
    2, 
    3, 
    4 
    ] 
} 

Answer 6

Possiamo usare angolare tubo JSON

{{ jsonObject | json }}