Angular-从api加载后在模板中显示数据

Question

我有一个服务http，可以将数据加载到API中或从API加载数据。在这种情况下，我需要从服务器获取数据并将其显示在模板中。

这是我的代码

export class RouteDetailComponent implements OnInit{
  public routeId:number;
  public route:Route;
  public actUrl: string;
ngOnInit() {
this.routeId = this.activateDroute.snapshot.params['id'];

let data;
this.httpService.getRoute(this.routeId)
    .subscribe(
        (response: Response) => {
            data = response.json().data;

            this.route = new Route(
                data.route_id,
                data.route_name,
                data.user_id,
                data.first_name+" "+data.last_name,
                data.tags,
                data.added,
                data.last_changed,
                data.geojson,
                data.visible,
                data.description,
                data.reviews,
                data.route_length.toPrecision(3)
            );
            console.log(this.route);
        },
        (error) => console.log(error)
    );
  }
}

route对象只是存储路由信息的对象（一些构造函数，解析输入数据的方法等。）>

在模板中，我使用的路由对象是<h4>{{this.route.routeName}}</h4>。当我尝试运行此代码时，出现很多错误，告诉我我正在尝试访问未定义的属性。

我认为这是因为订阅是异步事件，并且在NgOnInit之后立即呈现html。但是，我不知道该如何处理。我想在从API加载模板之前向模板添加一些加载，然后向用户显示该数据。

有人可以告诉我该怎么做吗？

我有一个服务http，可以将数据加载到API中或从API加载数据。在这种情况下，我需要从服务器获取数据并将其显示在模板中。这是我的代码导出类RouteDetailComponent实现的...

Answer 1

您无需在模板代码中使用this.route，route就足够了。

Answer 2

处理此问题的一种方法是，您可以定义这样的模型来处理接收到的数据。