베타 버전으로 AngularJS 2 응용 프로그램을 만들고 있습니다. 내 페이지에서 객체의 JSON 표현을 표시하고 싶지만 표시 [Object Object]
되지 않습니다. {key1:value1 ....}
구성 요소에서 다음을 사용할 수 있습니다.
get example() {return JSON.stringify(this.myObject)};
그런 다음 템플릿에서 :
{{example}}
그러나 객체 배열이 있고 이러한 객체 목록을 인쇄하려면 어떻게 할 수 있습니까?
사용 :
<ul>
<li *ngFor="#obj of myArray">{{obj}}</li>
</ul>
결과는 다음과 같습니다.
-[오브젝트 오브젝트] -[오브젝트 오브젝트] -[오브젝트 오브젝트] -[오브젝트 오브젝트]
등등. JSON으로 표시하는 방법이 있습니까?
답변
웹앱의 개체 내부에있는 내용을 보려면 구성 요소 HTML 템플릿에서 json 파이프 를 사용하십시오 . 예를 들면 다음과 같습니다.
<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>
답변
값을 얻을 수있는 두 가지 방법이 있습니다.
- 점 표기법 (obj.property)을 사용하여 객체의 속성에 액세스합니다.
- 예를 들어 obj [ “property”]와 같은 키 값을 전달하여 객체의 속성에 액세스합니다.
답변
<li *ngFor="let obj of myArray">{{obj | json}}</li>
답변
새 구문으로 다른 사람의 답변 업데이트 :
<li *ngFor="let obj of myArray">{{obj | json}}</li>