Angular 2 模板标签说对象未定义 [英] Angular 2 template tags say object is undefined

问题描述

处理 Angular 2 中的奇怪问题.

Dealing with strange issue in Angular 2.

如果您查看下面的组件，该服务会返回一个已解析的对象——例如，我可以console.log 它.您可以看到粘贴为注释的输出.每当我尝试在视图中使用所述对象时，我都会收到一个错误:EXCEPTION: TypeError: Cannot read property 'subject' of undefined in [{{theData.subject}} in SubjectHomeComponent@2:27].

If you look in the component below, the service returns a parsed object – for instance I can console.log it. You can see the output pasted as a comment. Whenever I try to use said object in the view, I get an error: EXCEPTION: TypeError: Cannot read property 'subject' of undefined in [{{theData.subject}} in SubjectHomeComponent@2:27].

这对我来说没有意义，因为我可以在控制台中看到这个对象就好了.运行 typeof 也会返回它是一个对象.

This doesn't make sense to me as I can see the object in console just fine. Running typeof also returns that it's an object.

组件代码

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}]}

            });
    }
}

服务代码(我认为不相关但你永远不知道)

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

推荐答案

Try: {{theData?.subject}} 或 {{theData.subject}}</span>.

为什么会出现在很多重复的问题中:

The why is in lots of duplicated questions:

Angular2:TypeError:l_thing0 在 AppComponent@4:44 中的 [{{thing.title}}] 中未定义

这篇关于Angular 2 模板标签说对象未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！