Angular4延迟模板加载，直到收到API响应

我需要使模板处于加载状态，直到收到API响应

模板

<p>project: {{event.event_title}}
</p>

服务

import { Injectable } from '@angular/core';
import {Http,Headers} from "@angular/http";
import 'rxjs/add/operator/map';
import {environment} from "../../../../environments/environment";

@Injectable()
export class ServicesApiCustomerEventService {
    url= `${environment.apiUrl}`;

    constructor(private http: Http) { }

    getEventById(id){
      let headers = new Headers();
      let currentUser = JSON.parse(localStorage.getItem('currentUser'));
      headers.append('Authorization',currentUser.token);
      headers.append("Content-Type", 'application/json')
      return this.http.post(this.url+'/customer/get_event_by_id',{"event_id": id}, {headers: headers})
    }  
}

错误

---

问题是，因为接收API响应需要一些时间，因此在加载模板时，我会遇到未定义的错误。有人能帮我吗？执行此操作的最佳实践是什么？

您需要向组件路由添加解析器。 在你的路线上应该是这样的

{ path: PATH.EVENTS_ID, component: CustomerEventComponent, resolve: {event: EventResolverService} }

在您的解析器服务中，类似于：

  resolve(route: ActivatedRouteSnapshot): Observable<IEvent> {
    return this.eventService.getEventById(route.params['id']).map((event: IEvent) => event);
  }

---

您需要向组件路由添加解析程序。 在你的路线上应该是这样的

{ path: PATH.EVENTS_ID, component: CustomerEventComponent, resolve: {event: EventResolverService} }

在您的解析器服务中，类似于：

  resolve(route: ActivatedRouteSnapshot): Observable<IEvent> {
    return this.eventService.getEventById(route.params['id']).map((event: IEvent) => event);
  }

---

一些选项：在这种情况下，最简单的方法是将

event

初始化为

event={}

或使用安全导航操作符或使用ngIf或使用异步管道。有些人在这里读：：）是的，我明白了。但是，仍然可以在没有数据的情况下加载模板（需要一些时间），所以这不是一个好的UX。有什么解决方案吗？那么您需要一个解析器：一些选项：在这种情况下，最简单的方法是将

event

初始化为

event={}

或使用安全导航操作符或使用ngIf或使用异步管道。有些人在这里读：：）是的，我明白了。但是，仍然可以在没有数据的情况下加载模板（需要一些时间），所以这不是一个好的UX。有什么解决方案吗？那么您需要一个解析器：

  ngOnInit() {
    this.event = this.route.snapshot.data['event'];
  }