使用 ngFor 访问数组中数组的属性

Question

基本上我想做的是将属性添加到 Angular 中的 table。问题是属性嵌套在位于数组内的数组中。

我假设这个问题可以通过一次使用几个 *ngFor 指令来解决，但我不太清楚正确的语法。

总结起来就是有一组学生。该数组中的每个学生都有自己的成绩数组。该数组中的每个年级都有一个名为 "theAssignment" 的对象。每个作业都有一个 "type" 的属性。我想要完成的是将每个作业的类型添加到 table 中的一个单元格中。这里有一些 JSON 有助于可视化结构：

(3) [{…}, {…}, {…}]
0:
    accessLevel: "Student"
    conductLevel: "Average"
    dob: -269640000000
    email: "lt@gmail.com"
    firstName: "Luis"
    gradeLevel: "Senior"
 grades: Array(4)
0:
    gradeID: 2
    pointsEarned: 80
    theAssignment:
        id: 1
        type: "Test"

我相信这段代码总结了我正在尝试做的事情（尽管，显然你不能在一个标签中有多个指令，这可能是偏离基础的方式）：

<th scope="row" *ngFor="let student of students" *ngFor="let 
grades of student.grades" *ngFor="let grade of grades">{{ 
grade.theAssignment.type }}</th>

我知道如何使单个 *ngFor 指令正常工作，但是添加这么多层会增加复杂性，我还不能接受table。

Answer 1

只需将其包装在主循环内的 ng 容器中，然后访问对象上的属性

<ng-container
 *ngFor=“let grade of student.grades”>

</ng-container>

使用 ngFor 访问数组中数组的属性

Accessing Attribute of an Array within an Array using ngFor

typescript

ngfor