次のようなJSONオブジェクトのリストがあるとしましょう。
data = {
id: 1,
someObjAsString: '{"p1":"a", "p2": "b"}',
...
... other properties
}
* ngForを使用してsomeObjAsStringからp2を表示したい：
<div *ngFor="let data of dataList">
{{data.someObjAsString.p2}} <!-- What should I do here to display p2 property of someObjAsString-->
</div
JSON.parse（）は間違いなく機能していません
どんな助けでもいただければ幸いです。
someObjAsStringオブジェクトと同様に、KeyValueパイプを使用できます。
<div *ngFor="let item of dataList.someObjAsString | keyvalue">
Key: <b>{{item.key}}</b> and Value: <b>{{item.value}}</b>
</div>
通常ngFor、配列を反復処理するために使用されます。
更新：
オブジェクトは文字列として保存されるため、json.parse（）を使用してJavaScriptの値またはオブジェクトを作成できます。
data = {
id: 1,
someObjAsString: '{"p1":"a", "p2": "b"}',
anotherObj: '{"p1":"a", "p2": "b"}'
};
ngOnInit(){
for (const key in this.data) {
if (this.data.hasOwnProperty(key)) {
this.data[key] = JSON.parse(this.data[key]);
}
}
console.log(this.data);
}
そしてHTML：
<div *ngFor="let item of data | keyvalue">
Key: <b>{{item.key}}</b> and Value: <b>{{item.value | json}}</b>
<div *ngFor="let someObj of item | keyvalue">
someObj Key: <b>{{someObj.key}}</b>
and someObjValue: <b>{{someObj.value | json}}</b>
</div>
</div>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加