Не удается получить массив json из вложенного json в источник данных таблицы mat - PullRequest
0 голосов
/ 10 декабря 2018

Как я уже упоминал в заголовке, у меня проблемы с получением данных из вложенного массива json и назначением их источнику данных таблицы mat.Поэтому я надеюсь, что есть человек, который столкнулся с такой же проблемой, как я, и может мне помочь.Ниже я вставляю свой код:

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

Вот мой ответ json от webapi:

Json response

1 Ответ

0 голосов
/ 10 декабря 2018

попробуйте установить источник данных следующим образом, добавьте .data после источника данных:

this.dataSourceExam.data = result['courseEnrolments'];
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...