Probleme mit Angular 2 Versprechen übergeben Objekt

Question

Ich habe Probleme mit einem Versprechen, ein Degree-Objekt in Angular 2 zurückzugeben. Die erste Return-Anweisung (unkommentiert) in degree.service funktioniert gut in Kombination mit der unkommentierten Implementierung von getDegree() in build.component. Allerdings, wenn ich auf eine der beiden kommentierten Implementierungen zu wechseln versuchen, ein Versprechen verwenden, kommt das Objekt immer wieder als „undefiniert“

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

Answer 1

ich weiß nicht, wie Sie die currDeg in Ihrer Vorlage verwenden, aber mit dem Versprechen, die Dinge sind asynchron. Daher ist das entsprechende Objekt zu Beginn undefiniert, da es später festgelegt wird (wenn das Versprechen aufgelöst wird). Und dies, auch wenn das Versprechen mit Promise.resolve direkt gelöst wird.

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

Siehe dieses Plunkr: https://plnkr.co/edit/1fxE0okyMNj2JktURY4w?p=preview.