Angular HTML试图在typescript上的构造函数之前加载插值

我在建一个angular6项目，遇到了一些麻烦

问题是：我在HTML控制台上遇到了一个错误，在重新加载我的页面后，我得到了一条众所周知的错误消息，我知道这个问题，因为在加载/创建HTML的那一刻，变量atual是未定义的

但我的问题是：为什么要在调用component.ts的构造函数之前加载html

我最终可以得到数据，但不明白我做错了什么。我必须在构造函数之前的某个地方订阅事件吗

我有一个家

atual: Atual;
homeService: HomeService;

constructor(_homeService : HomeService) { 
this.homeService.getAtual().subscribe((res: any) => {
  console.log('Why is it called after html?');
  this.atual = res.data;
});  

atual.ts

export class Atual {

  public temperature: number;
  public wind_direction: string;
  public wind_velocity: number;
  public humidity: number;
  public condition: string;
  public pressure: number;
  public icon: string;
  public sensation: number;
  public date: string;

}

我的家

getAtual(): Observable<Atual[]> {
return this.http.get('./assets/atual.json')//, options)
    .map((response: Response) =>{
      return response.json();
    } )
}

---

getAtual（）：可观察的构造函数立即被调用，但
getAtual
是异步的。这意味着不会立即调用
subscribe
中的代码，因为您的服务必须先关闭并获取数据

为了避免错误，您可以使用
{{atual？.date}}
来代替，因为它是唯一的，所以只有在定义了
atual
时，它才会尝试显示
date
，您可以给出
atual:atual使用Atual类的瞬间初始化，这样它就不会
未定义

 atual: Atual = new Atual();

使用
{{atual？.date}
代替，这是感谢，它有助于解决控制台错误！
 atual: Atual = new Atual();