Cách hiển thị biểu diễn JSON chứ không phải [Đối tượng] trên màn hình

Tôi đang tạo một ứng dụng AngularJS 2 với phiên bản beta. Tôi muốn hiển thị đại diện JSON của một đối tượng trong trang của mình, nhưng nó hiển thị [Object Object]và không {key1:value1 ....}

Từ thành phần tôi có thể sử dụng:

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

và sau đó trong mẫu:

{{example}}

Nhưng nếu tôi có một mảng các đối tượng và muốn in một danh sách các đối tượng này, làm thế nào tôi có thể làm điều đó?

Sử dụng:

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

kết quả trong một cái gì đó như:

- [Đối tượng]
- [Đối tượng]
- [Đối tượng]
- [Đối tượng]

và như thế. Có cách nào để hiển thị chúng dưới dạng JSON không?

Nếu bạn muốn xem những gì bạn có trong một đối tượng trong ứng dụng web của bạn, thì hãy sử dụng ống json trong mẫu HTML thành phần, ví dụ:

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

Đã kiểm tra và hợp lệ bằng cách sử dụng Angular 4.3.2.

Chúng ta có thể sử dụng json ống góc

{{ jsonObject | json }}

Để lặp qua đối tượng JSON: Trong Angluar's (6.0.0+), bây giờ họ cung cấp đường ống keyvalue:

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

ĐỪNG ĐỌC

Để chỉ hiển thị JSON

{{ object | json }}

Đổ nội dung đối tượng như JSON có thể đạt được mà không cần sử dụng ngFor. Thí dụ:

Vật

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

Đánh dấu

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

Đầu ra (chạy qua trình làm đẹp để dễ đọc hơn, nếu không thì là đầu ra trong một hàng)

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

Tôi cũng đã phát hiện ra một trình định dạng và trình xem JSON hiển thị dữ liệu JSON lớn hơn dễ đọc hơn (tương tự như tiện ích mở rộng JSONView Chrome): https://www.npmjs.com/package/ngx-json-viewer

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

Có 2 cách để bạn có thể nhận các giá trị: -

1. Truy cập thuộc tính của đối tượng bằng cách sử dụng ký hiệu dấu chấm (obj.property).
2. Truy cập thuộc tính của đối tượng bằng cách chuyển vào giá trị khóa, ví dụ obj ["property"]

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

Cập nhật câu trả lời của người khác bằng cú pháp mới:

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

nếu bạn có mảng đối tượng và bạn muốn giải tuần tự hóa chúng trong compoent

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

sau đó trong mẫu

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