Angular4 - 为什么从服务承诺解决未定义？

我正在从一个承诺的未定义的回报摔跤。从我的侦探工作中，似乎问题是将承诺的结果分配给我称之为承诺的组件上的实例变量。我认为这是一个箭头函数的类型（或类似）问题，我尝试将返回的调查分配给此调查。Angular4 - 为什么从服务承诺解决未定义？

任何有识之士将不胜感激！

./survey.service.ts

import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import { SURVEYS } from './mock-survey'; 

export class Option { 
constructor(public id: number, 
      public text: string, 
      public value: number 
     ){} 
} 

export class Question { 
constructor(public id: number, 
      public type: string, 
      public text: string, 
      public required: boolean, 
      public options: Option[] = [] 
     ){} 
} 

export class Survey { 
constructor(public id: number, 
      public name: string, 
      public description: string, 
      public instructions: string, 
      public questions: Question[] = [] 
     ){} 
} 

@Injectable() 
export class SurveyService { 

    getSurveys(): Promise<Survey[]> { 
    return Promise.resolve(SURVEYS); 
    } 

    getSurvey(id: number | string): Promise<Survey> { 
    return this.getSurveys() 
     .then(surveys => surveys 
     .find(survey => survey.id === +id)); 
    } 

    public observable: Observable<any>; 
}

./survey.component.ts

import 'rxjs/add/operator/switchMap'; 
import { Observable } from 'rxjs/Observable'; 
import { Component, OnInit, Inject, HostBinding }  from '@angular/core'; 
import { MdDialogRef, MD_DIALOG_DATA } from '@angular/material'; 
import { Survey, SurveyService } from '../survey.service'; 

@Component({ 
    selector: 'app-survey', 
    templateUrl: './survey.component.html', 
    styleUrls: ['./survey.component.scss'], 
    providers: [SurveyService] 
}) 
export class SurveyComponent implements OnInit { 

    survey: Survey 
    surveyResults: {} 

    constructor(
    private surveyService: SurveyService, 
    public dialogRef: MdDialogRef<SurveyComponent>, 
    @Inject(MD_DIALOG_DATA) public data: any 
) { } 

    // getSurveys(): void { 
    // this.surveyService.getSurveys().then(
    //  surveys => this.surveys= surveys); 
    // } 


    // *This method also returns an undefined this.survey; Not issue with ngOnInit() 
    // getSurvey(): void { 
    // let survey_id = this.data.survey_id 
    // this.surveyService 
    //  .getSurvey(survey_id) 
    //  .then(s => {this.survey = s}); 
    // } 

    ngOnInit(): void { 
    this.surveyService 
     .getSurvey(this.data.survey_id) 
     .then((survey: Survey) => {this.survey = survey}); 

    // returns survey_id from MD_DIALOG_DATA 
    console.log(this.data.survey_id) 
    // returns survey JSON object; This arrives in browser console 
    console.log(this.surveyService.getSurvey(this.data.survey_id)); 
    // returns undefined 
    console.log(this.survey); 
    } 

    confirmSurveyResults() { 
    this.dialogRef.close(this.surveyResults); 
    console.log(this.survey); 
    } 


}

来源

2017-07-28 Mitt

您能否提供'mock-survey'文件的内容？ –

[我如何从angular2中的Observable/http/async调用返回响应？]（https://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from- an-observable-http2 async-call-in-angular2） – Alex

[Http API调用promise的响应可能是未定义的 - Angular 2]（https://stackoverflow.com/questions/45328860/response-of-http- api-call-promise-is-undefined-angular-2） – CodeWarrior

承诺是异步的，所以调查将在ngOnInit内总是不确定方法的背景：

ngOnInit(): void { 
    this.surveyService 
     .getSurvey(this.data.survey_id) 
     .then((survey: Survey) => { 
     this.survey = survey 
     console.log(this.survey);// here it WILL NOT be undefined 
     }); 


    // returns undefined because the promise is not fulfilled yet 
    console.log(this.survey); 
    }

来源

2017-07-28 14:35:44

感谢您的回应和澄清。现在为什么它返回undefined内部ngOnInit。 \t 但是，我仍然有一个问题。箭头功能分配不起作用该ngOnit以外，调查对象是不可用的模板。当我添加'* ngIf =“调查”'如果回报falsy，我得到一个空白模板。如果我删除* ngIf =“调查，并尝试访问'{ {survey.name}}'，那么我得到一个'ERROR TypeError：无法读取未定义的属性'名称'。这似乎是一个角度问题。我可能在某处丢失了一个细节。思考？ – Mitt

就像这样说，调查还没有在初始阶段。当你加载html时，它仍然不存在，所以在使用ngfor之前，你必须确保调查存在。

也许用ngIf？

来源

2017-07-30 20:32:08 Jusmpty

Angular4 - 为什么从服务承诺解决未定义？

回答

相关问题