Angular 2 Template-Tags sagen Objekt

Question

Umgang mit seltsamen Problem in Angular 2.

undefiniert Wenn Sie in der Komponente unten schauen, gibt der Dienst eine analysierte Objekt - zum Beispiel ich es console.log kann. Sie können die Ausgabe als Kommentar eingefügt sehen. Wenn ich versuche, das Objekt in der Ansicht zu verwenden, erhalte ich einen Fehler: EXCEPTION: TypeError: Cannot read property 'subject' of undefined in [{{theData.subject}} in SubjectHomeComponent@2:27].

Das ergibt für mich keinen Sinn, da ich das Objekt in der Konsole gut sehen kann. Running typeof gibt auch zurück, dass es ein Objekt ist.

Component-Code

import { Component, View } from 'angular2/core' 
import { CORE_DIRECTIVES } from 'angular2/common' 
import {SubjectService} from "../../services/subject/SubjectService.ts"; 
import Rx from 'rxjs/Rx' 
import { Response } from 'angular2/http' 
import {ROUTER_PROVIDERS} from "angular2/router"; 
import {RouteParams} from "angular2/router"; 


@Component({ 
    selector: 'subjectHomeComponent', 
    providers: [SubjectService] 
}) 

@View({ 
    template: ` 
     Hello World <span>{{theData.subject}}</span> 
    ` 
}) 

export class SubjectHomeComponent{ 
    constructor(subjectService: SubjectService, params: RouteParams){ 
     this.id = params.get('id') 

     subjectService.getSubjectCardsAndNotes(this.id) 
      .subscribe((res: Response) => { 
       this.theData = res 
       console.log(res) //returns {"subject":{"id":1,"name":"Spanish","created_at":"2016-01-23T06:54:50.321Z","updated_at":"2016-01-23T06:54:50.321Z"},"subject_id":1,"notes":[{"id":1,"title":"first note","body":"here i am!","created_at":"2016-01-27T03:10:09.238Z","updated_at":"2016-01-27T03:10:09.238Z","subject_id":1},{"id":2,"title":"first_note","body":"hello _buddy_","created_at":"2016-01-28T20:45:36.044Z","updated_at":"2016-01-28T20:45:36.044Z","subject_id":1}]} 

      }); 
    } 
} 

Service Code (was ich nicht glaube, ist relevant, aber man weiß ja nie)

import {Injectable} from "angular2/core"; 
import {Http, HTTP_PROVIDERS, Response} from "angular2/http"; 
import Rx from 'rxjs/Rx' 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class SubjectService{ 
    constructor(public http: Http){ 

    } 

    getSubject(){ 
     return this.http.request('/subjects.json') 
      .map((response) => response.json()) 
    } 
    getSubjectCardsAndNotes(id){ 
     return this.http.request(`subjects/${id}/subject_cards_and_notes.json`) 
      .map((response) => response.json()) 
    } 
} 

Answer 1

Versuchen: {{theData?.subject}} oder <span *ngIf="theData">{{theData.subject}}</span>.

Der Grund ist in vielen dupliziert Fragen:

Angular 2: TypeError: l_thing0 is undefined in [{{thing.title}} in AppComponent@4:44]