Angular 7组件变量未更新：idWizard赋值后仍为undefined

嗨，我一眼就看到了一个最可能导致问题的点——你写的生命周期钩子名字错了！Angular的初始化钩子是ngOnInit（注意第二个字母O大写，第三个I大写），但你代码里写的是ngOninit（最后一个i小写）。这个错误会让Angular完全不执行这个方法里的代码，所以你的HTTP请求根本没发，idWizard当然一直是undefined！

首先修正钩子拼写 #

把方法名改成正确的ngOnInit，这应该能让你的代码开始执行：

export class HeaderComponent { 
  @Input() idWizard: string; 
  // 修正拼写：ngOnInit，不是ngOninit
  ngOnInit(){
    const response = this.was.postWizardStart(wi); 
    response.subscribe(res => { 
      this.idWizard = res.headers.get('idWizard'); 
      console.log("HEADER ngOnInit 2 OK 200 Server - Idwizard is: " + this.idWizard); 
      this.ref.markForCheck();
      console.log(this.idWizard); 
      this.emitflag = true; 
    }, err => { 
      console.log(err); 
    }); 
  } 
}

如果修正后还是有问题，再检查这些点 #

• 确认后端是否允许前端获取idWizard响应头
  很多后端框架默认不会暴露自定义响应头给前端，你需要让后端设置Access-Control-Expose-Headers: idWizard这个响应头，否则浏览器会阻止前端读取它。你可以打开浏览器的开发者工具，在Network面板里查看请求的响应头，确认idWizard是否存在。

• 检查HTTP请求是否返回完整响应
  如果你的postWizardStart方法用的是Angular的HttpClient，默认只返回响应体，不会包含响应头。你需要在请求里加上{ observe: 'response' }选项，才能拿到完整的响应对象：

// 在你的服务类里修改postWizardStart方法
postWizardStart(wi: any): Observable<HttpResponse<any>> {
  return this.http.post<any>('/你的接口地址', wi, { observe: 'response' });
}

• 变更检测是否正常触发
  虽然你调用了markForCheck()，但如果你的组件设置了ChangeDetectionStrategy.OnPush，需要确保组件的输入或引用类型变量有变化，才能触发变更检测。不过只要钩子正常执行，赋值后应该能更新视图，除非有其他上下文问题。

先解决拼写错误这个核心问题，这大概率就是你卡壳的原因啦！

内容的提问来源于stack exchange，提问作者MARIA RAFFAELLA SINISI