Пользовательское отображение файла JSON в угловых 6 из проекта рельсы API

Question

Я новичок в Angular, и у меня возникла проблема с данными карты из моего приложения Rails в приложение Angular. Я знаю, что мне нужно внести некоторые изменения в код, но я не знаю, как это сделать. Я хочу упомянуть, что я использую Rails 5.2 и Active Model Serializer для запроса json.

В моем приложении rails есть модели курса, сегмента, викторины, видео, а отношения:

1. В курсе было много сегментов
2. Сегменты могут быть викториной или видео, и я использую STI, поэтому викторины и видео находятся в таблице сегментов

Это файл json, который я получаю из приложения rails, и я хочу отобразить:

[
   {
      "id":1,
      "title":"Introduction",
      "author":"Dana Inbar",
      "segments":[
         {
            "id":1,
            "name":"Intro01",
            "data":"http://www.video.com/1/1"
         },
         {
            "id":2,
            "name":"Intro02",
            "data":"http://www.video.com/1/2"
         },
         {
            "id":3,
            "name":"Intro03",
            "data":"[
            {
                    "question 1" : "___",
                    "answers" : {
                                   "1" : "____",
                                   "2" : "____",
                                   "3" : "____"
                                 },
                    "correct_answer" : "2"
            },
            ]"  
         }
      ]
   },
   {
      "id":2,
      "title":"Master the ELN",
      "author":"Dana Inbar",
      "segments":[

      ]
   },
   {
      "id":3,
      "title":"Master the Inventory",
      "author":"Dana Inbar",
      "segments":[

      ]
   }
]

Это мои угловые файлы:

app.module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';
import { FormsModule } from '@angular/forms';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CourseModule } from './courses/course.module';
import { CourseService } from './courses/course.service';

@NgModule({
  declarations: [
    AppComponent
  ],

  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    CourseModule,
    FormsModule
  ],

  providers: [CourseService],
  bootstrap: [AppComponent]
})
export class AppModule { }

курсы / курс

export interface IQuiz {}

export interface IVideo {}

export interface ISegment {
  segment_id: string;
  name: string;
  type: string;
  data: string;
}

export interface ICourse {
  course_id: number;
  title: string;
  autor: string;
  
  segments: {
      [segment_id: string]: ISegment,
      [name: string]: ISegment,
      [type: string]: ISegment,
      [data: string]: ISegment
  }
}

курсы / course.service

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Observable, throwError } from 'rxjs';
import { map, tap, catchError } from 'rxjs/operators';

import { ICourse } from './course';

// Inject Data from Rails app to Angular app
@Injectable()
export class CourseService{
  private courseUrl = 'http://localhost:3000/courses.json';

  constructor(private http: HttpClient) {  }

  // Get Courses from Rails API App
  getCourses(): Observable<ICourse[]> {
    return this.http.get<ICourse[]>(this.courseUrl)
      .map((res: Response) => res.json()data)
      .catch(this.handleError);
  }

  // Handle Any Kind of Errors
  private handleError(error: Response) {
    console.error(error);
    return Observable.throw(error.json().error || 'Server Error');
  }
}

курсы / course.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { MatSidenavModule } from '@angular/material/sidenav';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { CourseListComponent } from './course-list/course-list.component';
import { CourseDetailComponent } from './course-detail/course-detail.component';
import { CourseService } from './course.service';
import { CoursePlayComponent } from './course-play/course-play.component';

const coursesRoutes: Routes = [
  { path: 'courses', component: CourseListComponent },
  { path: 'courses/:id', component: CourseDetailComponent },
  { path: 'courses/:id/1', component: CoursePlayComponent }
]

@NgModule({
  imports: [
    CommonModule,
    MatSidenavModule,
    BrowserAnimationsModule,
    RouterModule.forChild(
      coursesRoutes
    )
  ],
  declarations: [
    CourseListComponent,
    CourseDetailComponent,
    CoursePlayComponent
  ],
  providers: [
    CourseService
  ]
})
export class CourseModule { }

курсы / курс-лист / курс-list.component

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

import { ICourse } from '../course';
import { CourseService } from '../course.service';

@Component({
  selector: 'lg-course-list',
  templateUrl: './course-list.component.html',
  styleUrls: ['./course-list.component.sass']
})

export class CourseListComponent implements OnInit {
  pageTitle = "LabGuru Academy";
  courses: ICourse[] =[];
  errorMessage: string;

  constructor(private courseService: CourseService) { }

  ngOnInit() {
    this.courseService.getCourses()
      .subscribe(
        courses => this.courses = courses,
        errorMessage => this.errorMessage = <any>error
      );
  }

}

курсы / курс-лист / курс-list.html

<div class="row mt-3 no-gutters">
    <div class="col-lg-8">
      <img src="./assets/images/lg-purple.png" class="d-inline-block align-top" alt="">
    </div>
  </div>

  <div class="jumbotron">
    <div class="container text-center">
      <h1>{{pageTitle}}</h1>
    </div>
  </div>

  <div class="container-fluid bg-3 text-center">
    <div class="row justify-content-lg-center">
      <div class="col-sm-3" *ngFor="let course of courses | async">
        <div class="card">
          <div class="card-body">
            <h3 class="card-title">{{course.title}}</h3>
            <p class="card-text"><small class="text-muted">6 Lessons</small></p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <br><br>

курсы / курс-лист / курс-list.sass

$pos: 70px
$color: #5c0099
$bg-col:  #FFFFFF
$hig: 15rem
$wid: 15rem
$left: 5%
$top: 30%
$right: 7%

.jumbotron
  background-color: transparent
  color: $color

.col-sm-3
  position: relative
  min-height: 1px
  padding-left: $left
  outline-offset: none

.card
    border-color: $color
    background-color: $bg-col
    width: $wid
    height: $hig

.card-title
    position: absolute
    text-align: center
    padding: inherit

.card-text
    position: absolute
    bottom: $left
    right: $right