HTML 템플릿에서 중첩 된 데이터에 액세스하려고하는데 정의되지 않거나 결과로 아무것도 얻지 못합니다 (수업 목록이나 학생 목록이없는 빈 페이지).
HTML 템플릿 :
<div class="container">
<label *ngFor="let class of listClass | keyvalue">
<span> {{class.value.name}} </span>
</label>
<div>
<label *ngFor="let student of class.students | keyvalue">
<span>{{student.value.fullName}} </span>
</label>
</div>
</div>
이것은 수업과 그 안에있는 학생의 목록을 가져 오는 fonction입니다.
getListClasseStudent(){
this.classService.getStudents().subscribe((data) => {
this.listClass = data;
});
}
중첩 된 데이터 :
class:
0:{
code: "Math01"
teacher:
0: {id: 17551, name "Jack"}
students:
0: {studentId: 1, fullName: "Patrick bob"}
1: {studentId: 2, fullName: "Alice Alice"}
}
1:{
code: "English01"
teacher:
0: {id: 2, name "Nicolas"}
students:
0: {studentId: 1, fullName: "Patrick bob"}
1: {studentId: 2, fullName: "Alice Alice"}
}
각 반의 학생 명단에 접속하고 싶은데 효율적인 방법이 있나요? 미리 감사드립니다.
<div class="container">
<div *ngFor="let c of listClass ">
<label >
<span> {{c.code}} </span>
</label>
<div>
<label *ngFor="let student of c.students ">
<span>{{student.fullName}} </span>
</label>
</div>
</div>
이것을 시도하십시오 (파이프가없는 예)
'Class'객체에는 'value.name'속성이 없습니다 (아마도 파이프 '| keyvalue'에 의해 주입 될 것입니다). 두 번째 * ngFor는 각 클래스 내에서 students 배열을 반복해야하기 때문에 첫 번째 안에 있어야합니다.
이게 도움이 되길 바란다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다