Angular：使用 *ngfor将数据链接到动态表

Question

我正在创建一个动态表。下面我的JSON结构的问题在于，学生对象不包含对象中的主题数组，而是通过链接[]定义学生[]和主题[]，其中为学生一个学科定义了链接。

表的输出应该看起来像这样：

您有什么建议如何在上创建 *ngfor？

JSON结构看起来像这样：

export class StudentsAndSubjects {
 info: SchoolInformation;
}

export class SchoolInformation {
 students: Students[];
 subjects: Subjects[];
 links: Links[];
}

export class Students {
 id: string;   //example: student_1
 name: string;
 surname: string;
};
export class Subjects{
 id: string;   //example: subject_1
 name: string;
};
export class Links{
 studentId: string; //example: student_1
 subjectId: string; //example: subject_1
};

表结构：

@Component({
 selector: 'app-student-and-subjects',
 template: `
   <table>
     <tr *ngFor="let row of rowHeaders">
        <td *ngFor="let item of data.info.students.name">
           <span *ngIf="row !== 'Subjects'">{{ item[row] }}</span>
        </td>
        <table *ngIf="row === 'Subjects'">
            <tr **???**>
               <td>{{ subject}}</td>
            </tr>
        </table>
     </tr>
   </table>
`;
})
export class StudentsAndSubjects {
 @Input() data: StudentSubjectData;
 readonly rowHeaders = ['Student','Subjects']
}

Answer 1

首先，我认为您需要对桌子进行重组。由于主题表与特定学生相关联，因此它可能应该生活在包含该学生数据的td中：

<table>
  <tr *ngFor="let row of rowHeaders">
    <td *ngFor="let student of data.info.students"> <--- each td contains data for a student
      <span *ngIf="row !== 'Subjects'">{{ student.name }}</span>

      <table *ngIf="row === 'Subjects'"> <--- move this table inside the td
        <tr>
          <td *ngFor="let subject of getSubjectsForStudent(student)"> <-- the *ngFor you were missing
            {{ subject.name }}
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

另请注意，我更改了您的*ngfor =“让数据项目。 info.students.name“，因此它可以通过data.info.students而不是data.info.students.name迭代，因为您需要学生实例数据（和data.info.students.name不是集合）。

为了显示学生名称，我用{{item [row]}}用{{student.name}}替换。

然后，要显示该学生的主题，您将需要创建一种接受学生对象（或仅仅是其id）的方法，然后解析数据并返回学生的相关主题。

该方法是您要问的缺少*ngfor中所需的方法。

（或者，当然，您可以提前将数据转换为映射学生将其映射到学科的映射对象。）

因此，您要问的缺少*ngfor看起来像这样的东西：

<td *ngFor="let subject of getSubjectsForStudent(student)">

请注意，它在td上，而不是标记中的tr。那是因为每个主题都有自己的单元格，而不是自己的行 - 所有主题都在同一行中。

这是一个stackblitz 展示这种方法。