angular 2 RC5: platform-browser.umd.js:937 EXCEPTION: Error: Uncaught (in promise):

Question

我正在使用服务提出请求。

homepage.service.ts

import { Injectable } from "@angular/core";
import { Http, Response } from "@angular/http";

import { Observable } from "rxjs/Observable";
import { PATH } from "../const/config";

import { SliderRequest } from "../request/slider.request";

@Injectable()

export class HomepageService {
    private sliderUrl = PATH.url.getUrl();
    constructor (private _http: Http) {}
    getSlider(): Observable<SliderRequest> {
        let doRequest = this._http.get(this.sliderUrl.slider).map(
            (res) => {
                let response = res.json();
                return response;
            }
        );
        return doRequest;
    }
}

并且我把这个服务用到首页组件中

homepage.component.ts

import { Component, AfterViewInit, OnInit } from "@angular/core";
import { CONFIG, PATH } from "../../const/config";

import { Inject } from "../../inject/inject";

// import service
import { HomepageService } from "../../services/homepage.service";

@Component({
    selector: 'app-home',
    templateUrl: CONFIG.baseUrlForComponentView("home"),
    providers: [HomepageService]
})

export class HomeComponent implements AfterViewInit, OnInit {
    private sliders: any[];
    private shortDescription: any[];
    constructor( private homeService:  HomepageService) {}
    ngOnInit() {
        let that = this;
        this.homeService.getSlider().subscribe(
            (response) => {
                var data = response.data;
                this.shortDescription = data.shortDescription.text;
            }
        );
    }
    ngAfterViewInit() {
        Inject.load(PATH.javascript, 'global')
    }
}

然后在我的模板中这样做：

{{shortDescription.description}}

它 return 错误如下：

platform-browser.umd.js:937 EXCEPTION: Error: Uncaught (in promise): EXCEPTION: Error in public/templates/view/home.tpl.html:0:0
ORIGINAL EXCEPTION: TypeError: Cannot read property 'description' of undefined
ORIGINAL STACKTRACE:
TypeError: Cannot read property 'description' of undefined

所以我试试这个：

{{shortDescription | debug}}

debug 是我创建的一个特殊管道，以确保它 return 的值，并且它 return 的值如下：

"shortDescription": {
            "video": {
                "url": ""
            },
            "text": {
                "description": "<strong>Lorem</strong>ipsum",
                "goTo": "le concept"
            }
        }

但是如果我尝试使用 description 属性或 goTo 属性，它 return 就是我之前提到的错误。

不明白这是怎么回事？

欢迎大家的帮助！

Answer 1

由于您是第一次异步获取数据，因此您的变量 shortDescription 等于 undefined。

Elvis operator 应该可以解决您的问题：

{{shortDescription?.description}}

其他选项:

1) 使用结构指令 ngIf:

<template *ngIf="shortDescription">
  {{shortDescription.description}}
</template>

2) 设置初始值

export class HomeComponent implements AfterViewInit, OnInit {
  private shortDescription = { description: '' };
  ...

angular 2 RC5: platform-browser.umd.js:937 EXCEPTION: Error: Uncaught (in promise):

angular 2 RC5: platform-browser.umd.js:937 EXCEPTION: Error: Uncaught (in promise):

angular-rc5

angular