JSONからキー値を取得できませんAngular2のデータの子オブジェクト

Question

私は角度を使って作業しており、子オブジェクトのキー値からデータを取り込もうとしています。 JSONデータはここにある：私は何をしようとしている

"other_lessons": [ 
    { 
     "id": 290, 
     "name": "Christmas Test #290", 
     "course": { 
      "id": 43, 
      "name": "Christmas Test ", 
      "description": "", 
      "teacher": { 
       "id": 4, 
       "name": "Sandy's Teacher", 
       "email": "abc@s.com", 
       "role": "TEACHER", 
       "token": "abcd", 
       "about": "Blah blah blah ", 
       "phone": "2222222222", 
       "image_url": "xyz", 
       "payment_information": {} 
      } 
] 

はcourse.nameとcourse.idのデータの詳細を取得することです。そして私は開発者のコ​​ンソールでこのエラーを常に受け​​ています。

ERROR TypeError: Cannot read property 'name' of undefined 
at Object.eval [as updateRenderer] (ng:///AppModule/AppTileComponent.ngfactory.js:30) 
at Object.debugUpdateRenderer [as updateRenderer] (vendor.bundle.js:105951) 
at checkAndUpdateView (vendor.bundle.js:105102) 
at callViewAction (vendor.bundle.js:105445) 
at execComponentViewsAction (vendor.bundle.js:105377) 
at checkAndUpdateView (vendor.bundle.js:105103) 
at callViewAction (vendor.bundle.js:105445) 
at execComponentViewsAction (vendor.bundle.js:105377) 
at checkAndUpdateView (vendor.bundle.js:105103) 
at callViewAction (vendor.bundle.js:105445) 

JSONデータのIDと名前は問題なく動作しますが、私が実装されたコードは、私がすなわち、

<widget-app-tile> 

homepage.component.html

<widget-app-block title="You may be interested in"> 
<div class="row"> 
    <div class="col-md-6" *ngFor="let lesson of lessons"> 
    <widget-app-tile [lesson]="lesson"></widget-app-tile> 
    </div> 
</div> 
</widget-app-block> 

アプリ-tile.component.tsセレクタタグに詳細を渡している、このようなものです

import { Component, OnInit, Input } from '@angular/core'; 
import { Lesson } from '../../models/models'; 

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

export class AppTileComponent implements OnInit { 

    @Input() lesson : Lesson = <Lesson> {} 

    constructor() { } 

    ngOnInit() { 
    } 

} 

アプリ-tile.component.html

<div class="content-details"> 
<div class="details"> 
    <h5>{{lesson.course.name}}</h5> 
    <img class="icon" src="/assets/images/logo-transparent.png" alt="No Internet" align="right"/> 
</div> 

あなたは、私が呼び出した場合ということ見ることができるように{{}} lesson.course.nameそれがエラーをスローしますが、私が呼ぶとき、この{{}} lesson.nameまたは{{ lesson.id}}正常に動作し、データが表示されます。

私はCerialize Libraryを使用していると私のモデルクラスはこれです：

model.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 Course { 

    @deserialize id: number 
    @deserialize name: string 

} 

export class Lesson { 

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

だから、これは私がインタフェースを使用していない、データを取得するために使用しているモデルです。

は、私は私のホーム・ページ自体の結果を取得しようとしているとの結果が罰金来ますが、使用しているが、アプリ-tile.component.tsである理由私にはわからない

を編集しますうまく動作しません。次のように私が実装さOCDEは次のとおりです。

homepage.component.html

<div class="" *ngFor="let lesson of lessons" > 
#{{lesson.id}} - {{lesson.name}}; Course: {{lesson.course.name}} 
</div> 

<widget-app-block title="You may be interested in"> 
<div class="row"> 
    <div class="col-md-6" *ngFor="let lesson of lessons"> 
    <widget-app-tile [lesson]="lesson"></widget-app-tile> 
    </div> 
</div> 
</widget-app-block> 

そして、ここではそれが正常に動作しています。もう1つの詳細は以下の通りです：

homepage.component。anuglaでギ日にTS

export class MyClassesComponent implements OnInit { 

    lessons : Lesson[] = [] 

    constructor(private http : HttpClient) { } 

    ngOnInit() { 
    } 

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

Answer 1

あなたは、角度日付pipleを利用することができます：https://angular.io/api/common/DatePipeここで与えられた多くの形式か、角度のサイトに、あなたの自己に応じて例の一つをギ文字列を渡すことができ

<p>The hero's birthday is {{ birthday | date:"MM/dd/yy" }} </p> 

---

その良い問題が解決しましたが、将来のために、私はあなたがオブジェクトかどうかを取得しているし、また、あなたが適切なデータを取得したりしませ

されて見つけるために、あなたを助けることができる |jsonパイプを利用することが示唆します

また、NULL値をチェックするために?演算子を使用して、実行時にエラーが発生しないようにします。このような{{lesson?.course?.name}}

---

メークコードを結合する際に、あなたのコードにして

export class AppTileComponent implements OnInit { 
    private _lesson : Lesson; 

    @Input() 
    set lesson(less: Lesson) { 
     this._lesson = (less) || new Lesson(); 
    } 
    get lesson(): Lesson{ return this._lesson ; } 

    constructor() { } 
    ngOnInit() { 
    } 
}