Как получить доступ к объекту в массиве json с помощью angular?

Question

Я не могу получить доступ к массиву программ и консолью его в консоли js. Также как вы печатаете в компоненте HTML файла angular? Я пробовал много способов, но безуспешно. Может быть, я чувствую, что упускаю что-то очень легкое. Не могли бы вы помочь мне решить эту проблему? Также не могли бы вы объяснить, как легко получить доступ к форматам JSON с помощью angular или машинописного текста? Возможно, объяснения явно облегчили бы мне работу с этим 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

Вам необходимо использовать вложенные циклы *ngFor как минимум с одним экземпляром канала keyvalue. Попробуйте следующий

Контроллер

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 порядок сортировки труб, полученный из: { ссылка }