Как отобразить на экране представление JSON, а не [Object Object]

Я делаю приложение AngularJS 2 с бета-версией. Я хочу показать JSON-представление объекта на моей странице, но оно отображается, [Object Object]а не {key1:value1 ....}

Из компонента я могу использовать:

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

а затем в шаблоне:

{{example}}

но если у меня есть массив объектов, и я хочу напечатать список этих объектов, как я могу это сделать?

С помощью:

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

приводит к чему-то вроде:

- [Объект Object]
- [Объект Object]
- [Объект Object]
- [Объект Object]

и так далее. Есть ли способ отобразить их как JSON?

Если вы хотите увидеть, что у вас есть внутри объекта в вашем веб-приложении, используйте канал json в шаблоне HTML компонента, например:

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

Протестировано и допустимо с использованием Angular 4.3.2.

Мы можем использовать угловую трубу json

{{ jsonObject | json }}

Чтобы пройти через объект JSON: в Angluar (6.0.0+) теперь они предоставляют канал keyvalue:

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

ЧИТАЙТЕ ТАКЖЕ

Чтобы просто отобразить JSON

{{ object | json }}

Сброс содержимого объекта в формате JSON можно выполнить без использования ngFor. Пример:

объект

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

наценка

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

Вывод (пропущен через средство красоты для лучшей читаемости, в противном случае вывод выводится в одной строке)

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

Я также обнаружил средство форматирования и просмотра JSON, которое отображает большие данные JSON более читабельными (аналогично расширению JSONView для Chrome): https://www.npmjs.com/package/ngx-json-viewer

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

Есть 2 способа получить значения:

1. Доступ к свойству объекта с помощью записи через точку (obj.property).
2. Получите доступ к свойству объекта, передав значение ключа, например obj ["property"]

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

Обновление ответов других пользователей с помощью нового синтаксиса:

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

если у вас есть массив объектов, и вы хотите десериализовать их в компоненте

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

затем в шаблоне

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