角度2、私はこのように書きJSONデータを持っている

Question

Cerializeライブラリを使用して、クラスにオブジェクト項目の値をマッピング：

{ 
"courses_purchased_count": 0, 
"featured_lesson": { 
    "lesson": { 
     "id": 290, 
     "name": "Christmas Test #290", 
     "course": { 
      "id": 43, 
      "name": "Christmas Test ", 
      "description": "", 
      "teacher": { 
       "id": 4, 
       "name": "Sandy's Teacher", 
       "email": "xyz@s.com", 
       "role": "TEACHER", 
       "token": "xyz", 
       "about": "Blah blah blah ", 
       "phone": "2222222222", 
       "image_url": "xyz", 
       "payment_information": {} 
      }, 
      "image": "xyz", 
      "cover_image": "xyz", 
      "course_type": "WEEKLY_ONGOING", 
    }, 
    "status": "NEXT_AVAILABLE" 
} 
} 

私は何をしようとしていることにデータをマッピングすることですCerializable Library

models.ts私のホームページで

import { deserialize, deserializeAs, Deserialize } from 'cerialize'; 

/* UTILTY METHODS */ 

export function cast(data, modelClass) { 
    return Deserialize(data, modelClass) 
} 

export function castCollection (collection, modelClass) { 
    return collection.map(item => cast(item, modelClass)) 
} 

/* MODELS */ 

export class Teacher { 

    @deserialize name: string 
} 

export class Course { 

    @deserialize id: number 
    @deserialize name: string 
    @deserialize image: string 
    @deserializeAs(Teacher) teacher : Teacher 

} 

export class Lesson { 

    @deserialize id: number 
    @deserialize name: string 
    @deserialize start_time : Date 
    @deserializeAs(Course) course : Course 
} 

export class Featured { 
    @deserialize status : string 
    @deserializeAs(Lesson) lesson : Lesson 
} 

私はしたいのを使用して、このように書き、私は私のmodels.tsで作成したクラス{{featured_lesson.lesson.name}}、または{{featured.lesson.course.name}}のようなコースオブジェクトからデータを表示しますが、何らかのエラーが発生しています

ERROR TypeError: Cannot read property 'name' of undefined 

ホームページコンポーネントは次のとおりです：このエラーを取得

homepage.component.ts

import { Component, OnInit } from '@angular/core'; 
import { deserialize, Deserialize } from 'cerialize' 
import { HttpClient } from '@angular/common/http'; 
import { cast, castCollection, Lesson, Featured } from "../../../models/models"; 

@Component({ 
    selector: 'app-my-classes', 
    templateUrl: './my-classes.component.html', 
    styleUrls: ['./my-classes.component.css'] 
}) 

export class MyClassesComponent implements OnInit { 

    featured_lesson : Featured[] = [] 

    constructor(private http : HttpClient) { } 

    ngOnInit() { 

    } 

    ngAfterViewInit(){ 
    this.http.get("/ui/student/home").subscribe(data => { 
     this.featured_lesson = castCollection(data['featured_lesson'], Featured) 
    }) 
    } 
} 

homepage.component.html

<layout-app> 

    <div> 
    {{featured_lesson.lesson.name}} 
    </div> 

</layout-app> 

Iは、これらの物事を試してみたので、これらは、次のとおり

• feautred_lesson：注目[] = {}、私はそれが5月そうオブジェクトであるためTHOT行いますオブジェクトを与えることが、我々は言ってエラーを得たType '{}' is not assignable to type 'Featured[]'. Property 'includes' is missing in type '{}'.
• I試みたように、「状態」の値を取得し、この{{}} featured_lesson.statusERROR TypeError: collection.map is not a function at castCollection (models.ts:10)
としてエラーを与えました

• TREIDこのようにオブジェクトを取得するためにこれをやって：

とはconsole.log（this.featured_lesson）で

ngAfterViewInit(){ this.http.get("/ui/student/home").subscribe(data => { this.lessons = castCollection(data['other_lessons'], Lesson) //this.featured_lesson = castCollection(data['featured_lesson'], Featured) this.featured_lesson = data['featured_lesson'] })は私に結果を与えたが、私は私のhtmlファイルでそれを印刷しようとしたとき、私はスリムだと角よりについて知りたいので、私は解決策を探しています。この{{}} featured_lesson.lesson.name同じエラーcannot read porperty "name"

のように、ガイダンスが必要です。このことが私を確実に助けます。おかげで、あなたのコンポーネントで

Answer 1

は、featured_lessonがテーブルです：

featured_lesson : Featured[] = [] 

しかし、あなたのHTMLに、あなたはそれがオブジェクトであることを期待：

<div> 
    {{featured_lesson.lesson.name}} 
</div> 

の表は、（うまくオブジェクトではありません...少なくともここにいるとは思っていません）、配列内のオブジェクトプロパティにアクセスすることはできません。

あなたがそれにアクセスできるようにしたい場合は、次の2つのソリューションがあります。

1 - オブジェクトにあなたのfeatured_lessonを変換： - あなたのHTML内のオブジェクトを表示

featured_lesson : Featured = new Featured(); 

2：

{{featured_lesson[0].lesson.name}}