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

Question

正如我在标题中所述，我在从嵌套json数组中检索数据并将其分配给mat table的数据源时遇到了问题。因此，我希望有一个与我一样面临类似问题并能帮助我的人。我在下面粘贴我的代码：

COURSE.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);
  }

AVAILABLE-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'];