如何在 Ionic 中读取本地嵌套 json？

Question

我已经尝试解决这个问题好几个星期了，在整个互联网上寻找，我似乎找不到解决方案。

如何从我的 .json 文件中打印：年份名称和课程名称？我是否必须将career.id 和year.id 绑定在一起才能显示该职业年课程？我怎么能那样做？提前致谢！

.ts 文件

import { Component, OnInit } from '@angular/core';
import { MenuController, NavController } from '@ionic/angular';
import { Router } from '@angular/router';

@Component({
  selector: 'app-carreras',
  templateUrl: './carreras.page.html',
  styleUrls: ['./carreras.page.scss'],
})
export class CarrerasPage implements OnInit {

  carrera: any;

  constructor(
    public menu: MenuController,
    public router: Router,
    public navContrller: NavController,
  ) { }

  ngOnInit() {
    fetch('../../../assets/data/BDs/carreras.json').then(res => res.json()).then(json => {
      this.carrera = json;
    });
  }

}

.html 文件

//This works
    <ion-item class="carreerSelectionButton">
        <ion-label position="floating">Carrera</ion-label>
        <ion-select interface="action-sheet" placeholder="Seleccione su carrera" cancel-text="Cancelar">
            <ion-select-option *ngFor="let c of carrera; index as i">{{c.name}}</ion-select-option>
        </ion-select>
    </ion-item>

/This doesn't work
    <ion-item class="yearSelectionButton">
        <ion-label position="floating">Año</ion-label>
        <ion-select interface="action-sheet" placeholder="Seleccione su carrera" cancel-text="Cancelar">
            <ion-select-option *ngFor="let c of carrera; index as i">{{c.year.name}}</ion-select-option>
        </ion-select>
    </ion-item>

.json 文件

[{
        "id": "LCC",
        "name": "Licenciatura en Ciencias de la Computación",
        "year": [{
                "id": 1,
                "name": "Primer Año",
                "quarter": [{
                        "id": 1,
                        "course": [{
                                "id": "EA",
                                "name": "Elementos de Álgebra"
                            },
                            {
                                "id": "RPA",
                                "name": "Resolución de Problemas y Algoritmos"
                            },
                            {
                                "id": "IC",
                                "name": "Introducción a la Computación"
                            },
                            {
                                "id": "MSI",
                                "name": "Modelados y Sistemas de la Información"
                            }
                        ]
                    },
                    {
                        "id": 2,
                        "course": [{
                                "id": "DDA",
                                "name": "Desarrollo de Algoritmos"
                            },
                            {
                                "id": "EAL",
                                "name": "Elementos de Álgebra Lineal"
                            },
                            {
                                "id": "ETC",
                                "name": "Elementos de Teoría de la Computación"
                            },
                            {
                                "id": "MODATOS",
                                "name": "Modelados de Datos"
                            }
                        ]
                    }
                ]
            },

Answer 1

如下更改您的代码...

<div *ngFor="let c of carrera;>   
 <ion-item class="yearSelectionButton">
        <ion-label position="floating">Año</ion-label>
        <ion-select interface="action-sheet" placeholder="Seleccione su carrera" cancel-text="Cancelar">
            <ion-select-option *ngFor="let yName of c.year; index as i">{{yName.name}}</ion-select-option>
        </ion-select>
    </ion-item>
    </div>