Como exibir uma representação JSON e não [Object Object] na tela

Estou fazendo um aplicativo AngularJS 2 com a versão beta. Quero mostrar uma representação JSON de um objeto na minha página, mas mostra [Object Object]e não {key1:value1 ....}

No componente, posso usar:

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

e depois no modelo:

{{example}}

mas se eu tenho uma matriz de objetos e gostaria de imprimir uma lista desses objetos, como posso fazer isso?

Usando:

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

resulta em algo como:

- [Objeto Objeto]
- [Objeto Objeto]
- [Objeto Objeto]
- [Objeto Objeto]

e assim por diante. Existe uma maneira de exibi-los como JSON?

Se você quiser ver o que tem dentro de um objeto em seu aplicativo da web, use o pipe json em um modelo HTML de componente, por exemplo:

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

Testado e válido usando Angular 4.3.2.

Podemos usar tubo angular json

{{ jsonObject | json }}

Para percorrer o objeto JSON: No Angluar (6.0.0+), agora eles fornecem o tubo keyvalue:

<div *ngFor="let item of object| keyvalue">
  {{ item.key }} - {{ item.value }}
</div>

LEIA TAMBÉM

Para exibir apenas JSON

{{ object | json }}

O despejo do conteúdo do objeto como JSON pode ser obtido sem o uso ngFor. Exemplo:

Objeto

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>

Saída (executado por meio de um embelezador para melhor legibilidade, caso contrário, é gerado em uma única linha)

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

Também descobri um formatador e visualizador JSON que exibe dados JSON maiores e mais legíveis (semelhante à extensão JSONView do Chrome): https://www.npmjs.com/package/ngx-json-viewer

<ngx-json-viewer [json]="someObject" [expanded]="false"></ngx-json-viewer>

Existem 2 maneiras pelas quais você pode obter os valores: -

1. Acesse a propriedade do objeto usando a notação de ponto (obj.property).
2. Acesse a propriedade do objeto passando o valor-chave, por exemplo obj ["propriedade"]

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

Atualizando as respostas dos outros com a nova sintaxe:

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

se você tem array de objetos e gostaria de desserializá-los no componente

get example() { this.arrayOfObject.map(i => JSON.stringify (i) ) };

então no modelo

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

this.http.get<any>('http://192.168.1.15:4000/GetPriority')
  .subscribe(response => 
  {
  this.records=JSON.stringify(response) // impoprtant
  console.log("records"+this.records)
  });