如何使用 angular 访问 json 阵列中的 object？

Question

我无法访问教学大纲数组并在 js 控制台中对其进行控制台。 另外，如何在 angular 文件的 HTML 组件中打印？ 我尝试了很多方法，但都没有成功。 也许我觉得我错过了一些非常容易的东西。 你们能帮我解决这个问题吗？ 您还可以解释一下如何使用 angular 或 typescript 轻松访问 JSON 格式吗？ 也许解释清楚会让我更容易使用这个 JSON。

[{

  "State": "Tamil Nadu",
  "syllabus": [
    {
      "board": "CBSE",
      "details": [
        {
          "subject": "Tamil",
          "LKG": true,
          "UKG": true,
          "I": true,
          "II": true,
          "III": true,
          "IV": true,
          "V": true,
          "VI": true,
          "VII": true,
          "VIII": true,
          "IX": true,
          "X": true,
          "XI": true,
          "XII": true
        },
        {
          "subject": "English",
          "LKG": true,
          "UKG": true,
          "I": true,
          "II": true,
          "III": true,
          "IV": true,
          "V": true,
          "VI": true,
          "VII": true,
          "VIII": true,
          "IX": true,
          "X": true,
          "XI": true,
          "XII": true
        },
        {
          "subject": "Maths",
          "LKG": true,
          "UKG": true,
          "I": true,
          "II": true,
          "III": true,
          "IV": true,
          "V": true,
          "VI": true,
          "VII": true,
          "VIII": true,
          "IX": true,
          "X": true,
          "XI": true,
          "XII": true
        },
        {
          "subject": "Physics",
          "LKG": true,
          "UKG": true,
          "I": true,
          "II": true,
          "III": true,
          "IV": true,
          "V": true,
          "VI": true,
          "VII": true,
          "VIII": true,
          "IX": true,
          "X": true,
          "XI": true,
          "XII": true
        },
        {
          "subject": "Chemistry",
          "LKG": true,
          "UKG": true,
          "I": true,
          "II": true,
          "III": true,
          "IV": true,
          "V": true,
          "VI": true,
          "VII": true,
          "VIII": true,
          "IX": true,
          "X": true,
          "XI": true,
          "XII": true
        },
        {
          "subject": "Biology",
          "LKG": true,
          "UKG": true,
          "I": true,
          "II": true,
          "III": true,
          "IV": true,
          "V": true,
          "VI": true,
          "VII": true,
          "VIII": true,
          "IX": true,
          "X": true,
          "XI": true,
          "XII": true
        }
      ]
    },
    {
      "board": "State board",
      "details": []
    }
  ]

},
{
    "State":"Kerala"
}]

html 组件和 TS：

<div *ngFor="let item of data"> <p>{{item.syllabus}}</p> </div>  

ngOnInit() {
this.dataService.sendGetRequest().subscribe(( data: any[]) => { console.log(data); this.data = data; console.log(); });
} 

注意：没有错误，只是它什么都不显示

Answer 1

您需要使用具有至少一个键值 pipe 实例的嵌套*ngFor keyvalue 。 尝试以下

Controller

export class AppComponent  {
  data = SUBJECTS;

  originalOrder = (a: KeyValue<number,string>, b: KeyValue<number,string>): number => {
    return 0;
  }
}

模板

<ng-container *ngFor="let state of data">
  <h1>{{ state.State }}</h1>
  <ng-container *ngFor="let syllabus of state.syllabus">
    <h3>{{ syllabus.board }}</h3><hr>
    <ng-container *ngFor="let detail of syllabus.details">
      <ng-container *ngFor="let grade of detail | keyvalue: originalOrder; let first=first">
        <h3 *ngIf="first; else gradesBlock">{{ grade.key }}: {{ grade.value }}</h3>
        <ng-template #gradesBlock>{{ grade.key }}: {{ grade.value }}</ng-template>
        <br/>
      </ng-container>
    </ng-container>
  </ng-container>
</ng-container>

键值keyvalue排序顺序来自： https://stackoverflow.com/a/52794221/6513921