如何使用 angular 访问 json 数组中的对象？

Question

我无法访问教学大纲数组并在 js 控制台中控制它。另外，如何在 angular 文件的 HTML 部分打印？我尝试了很多方法，但都没有成功。也许我觉得我错过了一些非常容易的事情。你们能帮我解决这个问题吗？您还可以解释一下如何使用 angular 或打字稿轻松访问 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

您需要使用至少一个 keyvalue 管道实例的嵌套 *ngFor 循环。尝试以下

控制器

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 管道排序顺序来自：

如何使用 angular 访问 json 数组中的对象？

How do you access the object in the json array using angular?

json

typescript

angular

angular8