在 Angular 中显示 JSON Object 内的对象

Question

我有一个 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 中做一些事情，但我找不到任何东西。

Answer 1

请像这样尝试。 在模板中，您可以键值 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>