[英]Displaying Objects Inside JSON Object in Angular
我有一個 JSON 數據庫,其中包含一些嵌套對象:
{
"characters2": [
{
"campaign":"Menagerie Coast",
"index": 1,
"name": "Mark Whithershmitz",
"portrait": "assets/pics/markW.jpg",
"affiliation": "Kryn Dynasty",
"class": "Wizard - Bladesinger",
"list1": {"Swords":[
"McClane: Moon-Glow Scimitar",
"Carver: Shadow Sword"
]},
"list2": {"Remarks about his Race":"5"},
"title1a":"Sword Count",
"title1b": "2",
"title1c": "fa fa-robot",
"title2a":"Kills",
"title2b": "0",
"title2c": "fas fa-skull-crossbones",
"title3a":"Magic Sword",
"title3b": "None",
"title3c": "fas fa-dumpster-fire"
},
{
"campaign":"Menagerie Coast",
"index": 2,
"name": "The Hermit II",
"portrait": "assets/pics/theHermit2.jpg",
"affiliation": "None?",
"class": "Rogue/Mastermind",
"list1": {"Bag of Animal Cotton?": [
"Lion x 2",
"Goat"
]},
"list2": [],
"title1a":"Bar Fights",
"title1b": "0",
"title1c": "fas fa-beer",
"title2a":"Kills",
"title2b": "0",
"title2c": "fas fa-skull-crossbones",
"title3a":"Badassery",
"title3b": "Medium",
"title3c": "far fa-laugh-beam"
}]}
我通過訂閱 observable 來訪問數據庫:
import { Component, OnInit } from '@angular/core';
import { DndDatabaseService } from 'src/app/dnd-database.service';
@Component({
selector: 'app-player-card',
templateUrl: './player-card.component.html',
styleUrls: ['./player-card.component.scss']
})
export class PlayerCardComponent implements OnInit {
characters;
characters2;
isDataAvailable:boolean = false;
constructor(private dndDatabaseService: DndDatabaseService) { }
ngOnInit() {
this.dndDatabaseService.getCharacters().subscribe(characters => {this.characters = characters as playerData[]})
this.dndDatabaseService.getCharacters2().subscribe(characters2 => {(this.characters2 = characters2 as playerData[])})
this.isDataAvailable = true;
}
export class playerData {
name: string;
potrait: string;
affiliation:string;
class: string;
list1: object;
list2: object;
campaign: string;
index: number;
title1a:string;
title1b: string;
title2a:string;
title2b: string;
title3a:string;
title3b: string;
}
數據庫服務是一個簡單的 http.get 調用,它返回 json。
我正在使用 *ngFor 創建 HTML 對象,該對象適用於除 list1 和 list2 對象之外的所有對象。
<div *ngFor character in characters2 >
<h1>{{character.name}}</h1>
<p>{{(character.list1}}</p>
<p>({{character.list2}})</p>
</div>
帶有此代碼的 list1 和 2 的 output 只是 [object Object]。 我不能使用 object(例如 character.list1.Swords)中的密鑰,因為我希望能夠在 list1 和 list2 下為不同的字符設置不同的對象。
顯示此信息的最佳方式是什么? 我可以編寫一個新的 observable,但我確信這不是“最好”的方式。 我曾嘗試使用 json pipe 但它顯示 JSON 和大括號。 我可能會離開 css ,但這似乎也不是最好的解決方案。
我確信我可以在訂閱 observable 或 HTML 中做一些事情,但我找不到任何東西。
請像這樣嘗試。 在模板中,您可以鍵值 pipe。 使用此 pipe 您可以訪問對象 item1 和 item2 的鍵和值。
characters2 = {
characters2: [
{
campaign: "Menagerie Coast",
index: 1,
name: "Mark Whithershmitz",
portrait: "assets/pics/markW.jpg",
affiliation: "Kryn Dynasty",
class: "Wizard - Bladesinger",
list1: {
Swords: ["McClane: Moon-Glow Scimitar", "Carver: Shadow Sword"]
},
list2: { "Remarks about his Race": "5" },
title1a: "Sword Count",
title1b: "2",
title1c: "fa fa-robot",
title2a: "Kills",
title2b: "0",
title2c: "fas fa-skull-crossbones",
title3a: "Magic Sword",
title3b: "None",
title3c: "fas fa-dumpster-fire"
},
{
campaign: "Menagerie Coast",
index: 2,
name: "The Hermit II",
portrait: "assets/pics/theHermit2.jpg",
affiliation: "None?",
class: "Rogue/Mastermind",
list1: { "Bag of Animal Cotton?": ["Lion x 2", "Goat"] },
list2: [],
title1a: "Bar Fights",
title1b: "0",
title1c: "fas fa-beer",
title2a: "Kills",
title2b: "0",
title2c: "fas fa-skull-crossbones",
title3a: "Badassery",
title3b: "Medium",
title3c: "far fa-laugh-beam"
}
]
};
<div *ngFor="let character of characters2.characters2">
<h1>{{character.name}}</h1>
<div *ngFor="let item of character.list1 |keyvalue">
<span>{{item.key}}</span> : <span>{{item.value}}</span>
</div>
<div *ngFor="let item of character.list2 |keyvalue">
<span>{{item.key}}</span> : <span>{{item.value}}</span>
</div>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.