Javascript 角度-从api加载后在模板中显示数据

我有一个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对象只是存储路由信息的对象（一些构造函数、解析输入数据的方法等）

在模板中，我使用类似于

{{this.route.routeName}}

的路由对象。 当我试图运行这段代码时，我收到许多错误，告诉我我试图访问未定义的属性

我认为这是因为subscribe是异步事件，html是在它之后呈现的。 然而，我不知道如何处理这个问题。 我想在从API加载模板之前向模板添加一些加载，然后向用户显示这些数据

---

谁能告诉我怎么做吗

您不需要使用

这个。在模板代码中，
路由
就足够了

您可以使用Elvis运算符确保不会遇到未定义的变量问题

<h4>{{route?.routeName}}</h4>

{{route？.routeName}

或者您可以将所有模板代码包装在*ngIf中

<div *ngIf="route!=null">
    <h4>{{route.routeName}}</h4>   
</div>


{{route.routeName}}
处理此问题的一种方法是，可以这样定义模型来处理接收到的数据

class Route {
    //Type you can set here
    route_id: string ;
    route_name: string ;
    user_id: string ;
    first_name: string;
    last_name: string; 
    tags: string ;
    added: string ;
    last_changed: string ;
    geojson: string ;
    visible: string ;
    description: string ;
    reviews: string ;
    route_length: number ;

    constructor(obj?: any) {
        this.route_id =  (obj && obj.route_id) || '';
        this.route_name =  (obj && obj.route_name) || '';
        this.user_id =  (obj && obj.user_id) || '';
        this.first_name =  (obj && obj.first_name) || '';
        this.last_name =  (obj && obj.last_name) || '' 
        this.tags =  (obj && obj.tags) || '';
        this.added =  (obj && obj.added) || '';
        this.last_changed =  (obj && obj.last_changed) || '';
        this.geojson =  (obj && obj.geojson) || '';
        this.visible =  (obj && obj.visible) || '';
        this.description =  (obj && obj.description) || '';
        this.reviews =  (obj && obj.reviews) || '';
        this.route_length =  (obj && obj.route_length && obj.route_length.toPrecision) || 0;
    }
}
// With this type of model you don't have to worry about API data.
// It will handle everything and the component 
// won't break even if you are accessing any nested object.

export class RouteDetailComponent implements OnInit{
public routeId:number;
public route:Route = new Route(); //Here you need to initialize your 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;

                //Here you can simply pass the response from API 
                //and you will get the data in proper format
                this.route = new Route(data); 
                console.log(this.route);
            },
            (error) => console.log(error)
        );
    }
}

因此，即使API数据尚未到达，它仍将被处理。
是的，您在视图初始化期间不知道路由类数据成员的存在，因为您正在订阅中实例化它，一旦响应到达就会调用它。我的建议是寻找二传手和传接手，或者等待其他人提供解决方案：）可能的方法是通过ng保护视图，如果条件
*ngIf=“！！route”
@dhilt是的，我也有这个想法。但我想知道是否有更优雅的方式来做这件事。