1

サービスを使用してリクエストを行っています。

ホームページ.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;
    }
}

そして、私はこのサービスをホームページコンポーネントに使用しています

ホームページ.コンポーネント.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}}

そして、以下のエラーを返します。

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 は、値を確実に返すために作成した特別なパイプであり、以下の値を返します。

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

しかし、descriptionプロパティまたはgoToプロパティを使用しようとすると、前述のエラーが返されます。

そして、これで何が起こるのか理解できませんか？

すべての助けを歓迎します！

4

1 に答える 1

2

最初は非同期でデータを取得しているため、変数shortDescriptionは equals ですundefined。

Elvis オペレーターが問題を解決する必要があります。

{{shortDescription?.description}}

その他のオプション:

1) 構造ディレクティブngIfを使用します。

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

2) 初期値の設定

export class HomeComponent implements AfterViewInit, OnInit {
  private shortDescription = { description: '' };
  ...
于 2016-08-31T15:01:44.317 に答える