Angular 4中ngOnInit内服务请求与模板方法执行顺序异常求助

这是Angular开发里很常见的异步数据加载时机问题，我给你几个实用的解决方案：

1. 用安全导航操作符避免空指针错误 #

最简单的处理方式是在访问嵌套属性时加上?.（安全导航操作符），这样当whenDateCurrent还未赋值时，会直接返回undefined而不是抛出错误。你可以修改方法：

public getCurrentDate(): string { 
  return this.whenDateCurrent?.prev?.day; 
}

或者在模板里做兜底，确保输入框显示空字符串而非undefined：

<input mdInput readonly class="dateRange" name="dateRange" [value]="getCurrentDate() || ''">

2. 提前初始化whenDateCurrent #

在组件类里直接给whenDateCurrent一个初始的DateCustomDate实例，这样就算请求还没完成，getCurrentDate也能拿到合法的默认值，等请求完成后新值会自动覆盖并更新模板：

// 组件类属性初始化
whenDateCurrent: DateCustomDate = new DateCustomDate();

ngOnInit() { 
  this.service.get(1).subscribe((response) => { 
    // 请求完成后覆盖初始值
    this.whenDateCurrent = new DateCustomDate(); 
  }); 
}

3. 用Async管道处理异步流（Angular推荐风格） #

这是更符合Angular最佳实践的方案——直接把请求的Observable暴露给模板，用async管道自动处理订阅和数据更新，确保只有数据加载完成后才会渲染内容：

// 组件类中定义Observable
date$: Observable<DateCustomDate>;

ngOnInit() { 
  this.date$ = this.service.get(1).pipe(
    // 把响应转换成需要的DateCustomDate实例
    map(() => new DateCustomDate())
  );
}

模板里结合async管道和安全导航操作符使用：

<input mdInput readonly class="dateRange" name="dateRange" 
       [value]="(date$ | async)?.prev?.day">

这种方式还能自动帮你管理订阅销毁，避免内存泄漏。

4. 添加加载状态控制显示 #

如果需要在加载过程中给用户提示，可以加一个加载状态标记，控制输入框的显示时机：

isLoading = true;
whenDateCurrent: DateCustomDate;

ngOnInit() { 
  this.service.get(1).subscribe((response) => { 
    this.whenDateCurrent = new DateCustomDate(); 
    this.isLoading = false;
  }); 
}

模板里通过*ngIf控制：

<input *ngIf="!isLoading" mdInput readonly class="dateRange" name="dateRange" 
       [value]="getCurrentDate()">
<span *ngIf="isLoading">加载中...</span>

问题根源说明 #

Angular的变更检测流程在ngOnInit执行后就会触发，模板会立即调用getCurrentDate方法；而this.service.get(1)是异步HTTP请求，需要等待服务器响应返回后才会给whenDateCurrent赋值，这就导致方法调用时数据还未准备好，从而出现取不到值的情况。

内容的提问来源于stack exchange，提问作者dooglu