0

我正在尝试在 QuestionService 中注入 DataService，但是当我分配“this.questions2”时，AppComponent 仍然认为该值未定义。我明白了

EXCEPTION: Error in ./AppComponent class AppComponent - inline template:3:20 caused by: Cannot read property 'forEach' of undefined

戳这里

问题服务

getQuestions(DataService: DataService<any>){
    this.DataService.getData()
        .subscribe(
            function(response) { 
                this.questions2 = response;
                return this.questions2;                   
            },

            function(error) { console.log("Error happened" + error)},
            function() { console.log("the subscription is completed")}
        );
    }

数据服务

getData (){
    return this.http.get(this.apiUrl)
                    .map(this.extractData)
                    .catch(this.handleError);
  }

  private extractData(res: Response) {
    let body = res.json();
    console.log(body);
    return body || { };
  }

应用组件

import { QuestionService } from './question.service';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Job Application for Heroes</h2>
      <dynamic-form [questions]="questions"></dynamic-form>
    </div>
  `,
  providers:  [QuestionService]
})
export class AppComponent {
  questions: any[];

  constructor(service: QuestionService) {
//why is the line below undefined?!
    this.questions = service.getQuestions();
  }
}
4

1 回答 1

1

您没有正确使用 observables。那么最终用户是应该订阅的用户。当您在问题服务中执行此操作时

getQuestions(DataService: DataService<any>){
    this.DataService.getData()
        .subscribe(
            function(response) { 
                this.questions2 = response;
                return this.questions2;                   
            },

            function(error) { console.log("Error happened" + error)},
            function() { console.log("the subscription is completed")}
        );
}

函数中的 return 没有做你认为它做的事情。这并不意味着你可以做到

questions = service.getQuestions();

这不是它的工作原理。它是应该订阅服务可观察的组件。所以真的，如果你考虑到这一点，问题服务是没用的。它没有目的。数据服务正在完成所有工作。因此，如果您仍想使用问题服务，那么您只需将呼叫返回至getData

getQuestions() {
  return this.dataService.getData();
}

就像我说的，它非常没用。然后在你的组件中，是你订阅服务的地方

getQuestions().subscribe((data) => {
  this.questions = data;
})

其他需要提及的事项：

  • 您需要学习使用箭头函数进行回调，而不是function关键字。
  • 看起来你在上一篇文章中仍然犯了同样DataService的错误。
  • 在您的组件中，您应该将 初始化questions为一个空数组。questions = []，因为 observable 订阅是异步的，如果没有初始化，模板会尝试使用未定义的值。
于 2016-12-12T04:02:05.400 回答