@Input 变量在 HTTP 请求中被填充答案

【问题标题】：@Input variable gets filled on HTTP request@Input 变量在 HTTP 请求中被填充
【发布时间】：2017-09-22 06:12:36
【问题描述】：

在我的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 请求尚未完成时，ngOnInit 中的 toFormGroup 函数被调用得太早。我不习惯 Observables。 getQuestions 中的 HTTP 请求完成后如何调用该函数。我已经尝试过ngOnChanges，但它甚至在ngOnInit 之前就被调用了。

【问题讨论】：

标签： angular typescript asynchronous observable

【解决方案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);}

  }

【讨论】：

我收到错误：',' 预期，找不到名称 'key'，类型 '[any, string]' 上不存在属性 'questions'
请注意，如果组件在其他地方使用，最好检查 questions 是否已定义，而不是检查第一次更改，而不是异步填充 questions。
这加上@n00dl3 是我在earlier reply 中建议的内容

【解决方案2】：

如果问题在对它们进行任何操作之前具有值，您可以通过检查ngOnChanges 来设置条件：

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

【讨论】：

@n00dl3 哈哈哈，谢谢！ :D 她也有一个妹妹，她也很可爱，斜眼而且几乎完全失明 :P 也许你看到了这张照片，这是我最后一张个人资料照片.. 我想她需要休息一下，不要代表我 :D imgur.com/a/m2s0d

【解决方案3】：

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

【讨论】：

我已经尝试调用ngOnChange 而不是ngOnInit，但它仍然在此行之前调用：this.questions = service.getQuestions().subscribe(val => console.log(val)); 已记录，因此questions 数组为空，我收到错误。跨度>
您可以检测它是第一次更改还是 ngOnChanges 中的数组不为空