Html 如何使用Angular/TypeScript在数组内部循环JSON数组的数据

我想在JSON对象中调用JSON对象，但无法这样做。当我尝试时，它输出为[object]

我已经尝试了所有的方法，但我是一个新的角度，不知道如何处理这个问题。我尝试过使用foreach，但它经常给我错误。我试过研究各种方法，但都没有成功

JSON文件（students.JSON）-从这里我想要coursedetails的值

[{
     "name": "Thomas Scott",
     "id": "5353553",
     "contact": "info@tom.ca",
     "courses": 
     [{
         "coursecode": "BFKG1232",
         "coursename": "User Design",
         "coursedetails":
         [{
            "date": "January 3rd 2018",
            "time": "3pm",
            "professor": "Josh Swede"
         }]
     },
     {
         "coursecode": "BJKRE4424",
         "coursename": "Integrated Design",
         "coursedetails":
         [{
            "date": "January 7th 2018",
            "time": "6pm",
            "professor": "Bill Timothy"
         }]
     }]
 }]

app.component.ts中的Typescript

export class AppComponent implements OnInit{
studs: any = [];

selectedStud = '';
constructor( private getStud: GetStudentsService ) {}

  this.getStud.getStudents().subscribe(
  data => { this.studs = data; },
  err => { console.log('Error'); },
  () => { console.log('Completed'); }
  );} 

  showCour() {
    this.courBut = true;} 

    selectItem(istud) {
    this.selectedStud = istud; } 
}

show-courses.component.html在html中如何调用它们。我可以正确获取coursecode和coursename，但coursedetails不会显示

<div>
    <strong>Courses</strong><br>
    <ul *ngFor="let lst of selStud.courses">
    <li>{{lst.coursecode}} - {{lst.coursename}}</li>
    <br>
    <li>{{lst.coursedetails}}</li>
    </ul>
    </div>

课程


{{lst.coursecode}-{{lst.coursename}


{{lst.coursedetails}

app.component.html（主页）

{{istud.name}




{{cour}}

基本上首先，我先叫学生（托马斯·斯科特） 然后，一旦我点击事件，它将调用课程。我可以毫无疑问地调用coursecode和coursname，但一旦调用CoursedDetails，它只显示[object，object]

---

有人能告诉我如何访问JSON文件中的coursedetails吗

您需要在第一个循环中有第二个循环，才能访问课程详细信息

我的解决方案是这样的

    <div>
        <strong>Courses</strong><br>
        <ul *ngFor="let lst of selStud.courses">
            <li>{{lst.coursecode}} - {{lst.coursename}}</li>
            <br>
            <li *ngFor="let course_details of lst.coursedetails">{{course_details.professor}}</li>
        </ul>
    </div>

<div>
    <strong>Courses</strong><br>
    <ul *ngFor="let lst of selStud.courses">
        <li>{{lst.coursecode}} - {{lst.coursename}}</li>
        <br>
        <li>{{ lst.coursedetails[0].date }}</li>
        <li>{{ lst.coursedetails[0].time }}</li>
        <li>{{ lst.coursedetails[0].professor }}</li>
    </ul>
</div>

课程


{{lst.coursecode}-{{lst.coursename}


{{{course\u details.professor}

您需要在第一个循环中有第二个循环，才能访问课程详细信息

我的解决方案是这样的

    <div>
        <strong>Courses</strong><br>
        <ul *ngFor="let lst of selStud.courses">
            <li>{{lst.coursecode}} - {{lst.coursename}}</li>
            <br>
            <li *ngFor="let course_details of lst.coursedetails">{{course_details.professor}}</li>
        </ul>
    </div>

<div>
    <strong>Courses</strong><br>
    <ul *ngFor="let lst of selStud.courses">
        <li>{{lst.coursecode}} - {{lst.coursename}}</li>
        <br>
        <li>{{ lst.coursedetails[0].date }}</li>
        <li>{{ lst.coursedetails[0].time }}</li>
        <li>{{ lst.coursedetails[0].professor }}</li>
    </ul>
</div>

课程


{{lst.coursecode}-{{lst.coursename}


{{{course\u details.professor}

由于CoursedDetails是一个数组，您还需要对其进行迭代：

show courses.component.html

<div>
    <strong>Courses</strong><br>
    <ul *ngFor="let lst of selStud.courses">
        <li>{{lst.coursecode}} - {{lst.coursename}}</li>
        <br>
        <ng-container *ngFor="let detail of lst.coursedetails">
            <li>{{ detail.date }}</li>
            <li>{{ detail.time }}</li>
            <li>{{ detail.professor }}</li>
        </ng-container>
    </ul>
</div>

课程


{{lst.coursecode}-{{lst.coursename}


{{detail.date}
{{detail.time}
{{detail.professor}}

另外，如果您确信在该数组中始终会得到一个对象（不超过一个），那么您也可以像这样直接访问第一个对象

    <div>
        <strong>Courses</strong><br>
        <ul *ngFor="let lst of selStud.courses">
            <li>{{lst.coursecode}} - {{lst.coursename}}</li>
            <br>
            <li *ngFor="let course_details of lst.coursedetails">{{course_details.professor}}</li>
        </ul>
    </div>

<div>
    <strong>Courses</strong><br>
    <ul *ngFor="let lst of selStud.courses">
        <li>{{lst.coursecode}} - {{lst.coursename}}</li>
        <br>
        <li>{{ lst.coursedetails[0].date }}</li>
        <li>{{ lst.coursedetails[0].time }}</li>
        <li>{{ lst.coursedetails[0].professor }}</li>
    </ul>
</div>

课程


{{lst.coursecode}-{{lst.coursename}


{{lst.coursedetails[0].date}
{{lst.coursedetails[0].time}
{{lst.课程详细信息[0].教授}

由于CoursedDetails是一个数组，您还需要对其进行迭代：

show courses.component.html

<div>
    <strong>Courses</strong><br>
    <ul *ngFor="let lst of selStud.courses">
        <li>{{lst.coursecode}} - {{lst.coursename}}</li>
        <br>
        <ng-container *ngFor="let detail of lst.coursedetails">
            <li>{{ detail.date }}</li>
            <li>{{ detail.time }}</li>
            <li>{{ detail.professor }}</li>
        </ng-container>
    </ul>
</div>

课程


{{lst.coursecode}-{{lst.coursename}


{{detail.date}
{{detail.time}
{{detail.professor}}

另外，如果您确信在该数组中始终会得到一个对象（不超过一个），那么您也可以像这样直接访问第一个对象

    <div>
        <strong>Courses</strong><br>
        <ul *ngFor="let lst of selStud.courses">
            <li>{{lst.coursecode}} - {{lst.coursename}}</li>
            <br>
            <li *ngFor="let course_details of lst.coursedetails">{{course_details.professor}}</li>
        </ul>
    </div>

<div>
    <strong>Courses</strong><br>
    <ul *ngFor="let lst of selStud.courses">
        <li>{{lst.coursecode}} - {{lst.coursename}}</li>
        <br>
        <li>{{ lst.coursedetails[0].date }}</li>
        <li>{{ lst.coursedetails[0].time }}</li>
        <li>{{ lst.coursedetails[0].professor }}</li>
    </ul>
</div>

课程


{{lst.coursecode}-{{lst.coursename}


{{lst.coursedetails[0].date}
{{lst.coursedetails[0].time}
{{lst.课程详细信息[0].教授}