2016-07-19 10 views
0

角度オブジェクト2を返すという約束を使用することに問題があります。degree.serviceの最初のreturn文(コメント化されていません)は、getDegreeの非実装の実装()内build.component。私は約束を使用して、コメントの実装のいずれかに切り替えるしようとすると、しかし、オブジェクトは常に「未定義」角2の約束渡しオブジェクトの問題

degree.service.ts

import { Injectable } from '@angular/core'; 

import { Degree } from '../components/degree'; 
import { Category } from '../components/category'; 
import { Course } from '../components/course'; 

import { SAMPLE } from '../components/mock-degree'; 

@Injectable() 
export class DegreeService{ 
    getDegree(){ 
    return SAMPLE; 
    // return Promise.resolve(SAMPLE); 
    // return new Promise<Degree>(function (resolve, reject) { 
    // resolve(SAMPLE); 
    // }) 
    } 
} 

build.component.tsとして戻ってきます

import { Component, Input, OnInit } from '@angular/core'; 
import { SEMANTIC_COMPONENTS, SEMANTIC_DIRECTIVES } from "ng-semantic"; 

import { Course } from '../course'; 
import { Category } from '../category'; 
import { PaneComponent } from './pane/pane.component'; 
import { Degree } from '../degree'; 

import { DegreeService } from '../../services/degree.service'; 


const blank: Category = { 
    name: '', 
    rank: 1, 
    rulestat: 'no', 
    categories: [], 
    courses: [] 
} 

@Component({ 
    selector: 'my-build', 
    directives: [SEMANTIC_COMPONENTS, SEMANTIC_DIRECTIVES, PaneComponent], 
    templateUrl: `app/components/build/build.component.html`, 
    providers: [DegreeService] 
}) 



export class BuildComponent implements OnInit{ 
    constructor(private degreeService: DegreeService){} 

    level: number = 1; 
    currDeg: Degree; 
    parents = [blank, blank, blank, blank]; 


    setLast(lst: Category){ //pass category objects, do all UI changing here 
    this.level = lst.rank + 1; 
    this.parents[lst.rank - 1] = lst; 
    } 

    getDegree(){ 
    //this.degreeService.getDegree().then(deg => this.currDeg = deg) 
    this.currDeg = this.degreeService.getDegree(); 
    } 

    ngOnInit(){ 
    this.getDegree(); 
    } 
} 
+0

「オブジェクトは常に「未定義」*に戻ります。いつあなたはそれにアクセスしますか(遅すぎますか?)スコープアプリケーションがありませんか? – Bergi

答えて

0

私はあなたのテンプレートでcurrDegを使用する方法を知りませんが、約束して、物事は非同期です。そのため、対応するオブジェクトは、(プロミスが解決されたときに)後で設定されるため、最初は未定義になります。これは、たとえ約束が直接Promise.resolveで解決されたとしても。

export class DegreeService{ 
    getDegree(){ 
    return Promise.resolve(SAMPLE); 
    } 
} 

@Component({ 
    selector: 'my-app', 
    providers: [DegreeService], 
    templateUrl: 'src/app.html' 
}) 
export class App { 
    constructor(private degreeService:DegreeService) { 
    } 

    getDegree(){ 
    this.degreeService.getDegree().then(deg => { 
     this.currDeg = deg; 
     console.log('this.currDeg = ' + this.currDeg); // <------ 
    }); 
    } 

    ngOnInit(){ 
    this.getDegree(); 
    } 
} 

このplunkr:https://plnkr.co/edit/1fxE0okyMNj2JktURY4w?p=previewを参照してください。

+0

ありがとう!あなたはそれがテンプレートの問題であることは間違いありませんでした。ローカルディグリーオブジェクトで直接解決されたとしても、テンプレートはすぐにcurrDegにアクセスしようとしましたが、そこには何もありませんでした。 currDegを空白度オブジェクトに初期化することで問題を解決しました。 –