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

Question

Tôi đang tạo ứng dụng AngularJS 2 với phiên bản beta. Tôi muốn hiển thị một biểu diễn JSON của một đối tượng trong trang của tôi, nhưng nó cho thấy [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 đối tượng và muốn in danh sách các đối tượng này, tôi có thể làm như thế nào?

Sử dụng:

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

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

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

và vân vân. Có cách nào để hiển thị chúng như JSON không?

Answer 1

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

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

Tested lệ sử dụng kiễu góc 4.3.2.

Answer 2

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

1. Tiếp cận tài sản của các đối tượng sử dụng ký hiệu dấu chấm (obj.property).
2. Tiếp cận tài sản của đối tượng bằng cách truyền về giá trị quan trọng ví dụ obj [ "sở hữu"]

Answer 3

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

Answer 4

Đang cập nhật câu trả lời của người khác với cú pháp mới:

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

Answer 5

bán phá giá nội dung đối tượng vì JSON có thể đạt được mà không cần sử dụng ngFor. Ví dụ:

Object

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> 

Output (chạy qua một beautifier để có thể đọc tốt hơn, nếu không nó là đầu ra trong một hàng duy nhất)

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

Answer 6

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

{{ jsonObject | json }}