首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >无法从嵌套的json检索到mat表数据源的json数组

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

Stack Overflow用户
提问于 2018-12-11 04:04:24
回答 1查看 1.5K关注 0票数 0

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

COURSE.SERVICE.ts​

代码语言:javascript
复制
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(this.baseUrl + 'allexams/' + id);
  }

AVAILABLE-EXAM.COMPONENT.ts

代码语言:javascript
复制
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响应:

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/53712832

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档