[英]Angular: linking data to dynamic table using *ngFor
I am creating a dynamic table.我正在创建一个动态表。 The problem with my json structure below is that the Students object does not contain Subjects array within the object, but rather Students[] and Subjects[] are defined through Links[], where there is link defined for student a subject.
下面我的 json 结构的问题是 Student 对象在对象中不包含 Subjects 数组,而是通过 Links[] 定义 Student[] 和 Subjects[],其中为学生定义了一个主题的链接。
The output of the table should look like this:表的输出应如下所示:
Do you have any suggestions how to create *ngFor in ???您对如何在 中创建 *ngFor 有什么建议吗? area that links each student to its subjects?
将每个学生与其学科联系起来的区域?
The json structure looks like this: 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
};
The table structure:表结构:
@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']
}
First, I think you need to restructure your table a bit.首先,我认为您需要稍微调整一下您的表格。 Since the table of subjects is associated to a particular student, it should probably live inside the
td
that contains that student's data:由于科目表与特定学生相关联,因此它可能应该位于包含该学生数据的
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>
Also note that I changed your *ngFor="let item of data.info.students.name"
so it iterates over data.info.students
rather than data.info.students.name
since you need the student instance data (and data.info.students.name
isn't a collection).另请注意,我更改了您的
*ngFor="let item of data.info.students.name"
所以它迭代data.info.students
而不是data.info.students.name
因为您需要学生实例数据(和 data.info ) data.info.students.name
不是一个集合)。
And to display the student name, I replaced {{ item[row] }}
with {{ student.name }}
.为了显示学生姓名,我将
{{ item[row] }}
替换为{{ student.name }}
。
Then, to display the subjects for that student, you would need to create a method that accepts the student object (or just its id
) and then parses the data and returns the student's associated subjects.然后,要显示该学生的科目,您需要创建一个接受学生对象(或只是其
id
)的方法,然后解析数据并返回学生的相关科目。
That method is what you would need in the missing *ngFor
that you're asking about.该方法是您在询问的缺少的
*ngFor
中需要的方法。
(Alternatively, of course, you could transform the data ahead of time into a mapping object that maps the students to their subjects.) (当然,您也可以提前将数据转换为映射对象,将学生映射到他们的科目。)
So the missing *ngFor
that you're asking about would look something like this:因此,您要询问的丢失的
*ngFor
看起来像这样:
<td *ngFor="let subject of getSubjectsForStudent(student)">
Note that it's on the td
, not the tr
like in your markup.请注意,它在
td
上,而不是在标记中的tr
上。 That's because each subject has its own cell, not its own row—all subjects are in the same row.这是因为每个科目都有自己的单元格,而不是自己的行——所有科目都在同一行。
Here's a StackBlitz showing this approach. 这是一个 StackBlitz展示了这种方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.