无法从嵌套的 json 中检索 json 数组到 mat 表数据源

Question

正如我在标题中提到的，我在从嵌套的 json 数组中检索数据并将其分配给 mat 表的数据源时遇到问题。 所以我希望有一个人和我遇到过类似的问题并且可以帮助我。 下面我粘贴我的代码：

课程.SERVICE.ts

 import { Injectable } from '@angular/core'; import { environment } from 'src/environments/environment'; import { HttpClient } from '@angular/common/http'; import { Course } from '../_models/course'; import { CourseEnrolment } from '../_models/available_exams/course_enrolment'; @Injectable({ providedIn: 'root' }) export class CourseService { baseUrl = environment.apiUrl; getAllExams(id) { return this.http.get<CourseEnrolment[]>(this.baseUrl + 'allexams/' + id); }

可用-EXAM.COMPONENT.ts

 import { Component, OnInit, ViewChild } from '@angular/core'; import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material'; import { CourseService } from 'src/app/_services/course.service'; import { AuthService } from 'src/app/_services/auth.service'; import { CourseEnrolmentsExam } from 'src/app/_models/courseEnrolmentsExam'; import { Exam } from 'src/app/_models/available_exams/exam'; import { Users } from 'src/app/_models/available_exams/users'; import { CourseEnrolment } from 'src/app/_models/available_exams/course_enrolment'; import { ExamList } from 'src/app/_models/available_exams/exam_list'; import { HttpClient } from '@angular/common/http'; @Component({ selector: 'app-available-exams', templateUrl: './available-exams.component.html', styleUrls: ['./available-exams.component.scss'] }) export class AvailableExamsComponent implements OnInit { dataSourceExam = new MatTableDataSource(); exams: Exam[]; courseEnrolments: CourseEnrolment[]; displayedColumns = [ 'id', 'name', 'subject', 'timeLimit', 'examResult' ]; @ViewChild(MatPaginator) paginator: MatPaginator; @ViewChild(MatSort) sort: MatSort; constructor( private courseService: CourseService, private authService: AuthService, private httpService: HttpClient ) {} ngOnInit() { this.courseService.getAllExams(this.authService.decodedToken.nameid).subscribe(result => { this.courseEnrolments = result['courseEnrolments']; console.log(result['courseEnrolments']); console.log(result['subject']); console.log(result['courseEnrolments.subject']); console.log(result['firstName']); console.log(result['subject']); console.log(result['courseEnrolments.subject']); console.log(result['courseEnrolments']); console.log(result['exams']); console.log(result['courseEnrolments.subject']); console.log(result['firstName']); if (;result) { return. } this.dataSourceExam = new MatTableDataSource(this;courseEnrolments). this.dataSourceExam.paginator = this;paginator. this.dataSourceExam.sort = this;sort; }): } applyFilter(filterValue. string) { filterValue = filterValue;trim(). filterValue = filterValue;toLowerCase(). this.dataSourceExam;filter = filterValue: } handleClick(event. Event) { console,log(''Click''; event); } }

这是我来自 webapi 的 json 响应：

Answer 1

尝试像这样设置数据源，在数据源之后添加.data：

this.dataSourceExam.data = result['courseEnrolments'];