Question

在我的app.component.ts中，我从一个返回HTTP请求结果的服务中调用一个函数：

questions: QuestionBase<any>[];
constructor(service: QuestionService) {
    this.questions = service.getQuestions().subscribe(val => console.log(val)); //gets logged after the other console log below
}

在子组件中，将进一步处理此questions数组：

@Input() questions: QuestionBase<any>[] = [];
form: FormGroup;

constructor(private qcs: QuestionControlService) {}

ngOnInit() {
    console.log("onInit", this.questions); //called before questions is filled
    this.form = this.qcs.toFormGroup(this.questions);
}

我的问题是，当HTTP请求尚未完成时，toFormGroup中的ngOnInit函数被过早调用。我不习惯Observables。如何在getQuestions中的HTTP请求完成后调用该函数。我已经尝试了ngOnChanges，但它甚至在ngOnInit之前就被调用了。

Answer 1

首先，您需要将值分配给subscribe（）调用中的问题：

service.getQuestions().subscribe(val => this.questions=val);

此外，在子组件中，您可以实现ngOnChanges()并在值仍为null时跳过对@Input()属性的第一次绑定。SimpleChange类具有布尔属性firstChange。

  ngOnChanges(changes: {[key: string]: SimpleChange}) {
    if (!changes.questions.firstChange){
         this.form = this.qcs.toFormGroup(this.questions);}

  }

Answer 2

您可以通过检查ngOnChanges来设置条件，如果问题有值，然后再对其进行操作：

ngOnChanges() {
  if(questions && questions.length) {
     this.form = this.qcs.toFormGroup(this.questions);
  }
}

Answer 3

您可以在ngOnChanges中调用toFormGroup。并且，如果需要，只在问题获得第一个值时调用toFormGroup。我现在正在使用手机，所以我无法提供代码示例。

@Input变量在HTTP请求中填充

3 个答案: