我有一个服务 http,它向 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)
);
}
}
路由对象只是存储路由信息的对象(一些构造函数,解析输入数据的方法等)。
在模板中,我使用了类似 <h4>{{this.route.routeName}}</h4>
的路由对象.
当我尝试运行此代码时,出现许多错误,告诉我我正在尝试访问未定义的属性。
我认为这是因为订阅是异步事件,而 html 是在 NgOnInit 之后立即呈现的。 但是我不知道如何处理这个。 我想在从 API 加载模板之前向模板添加一些加载,然后向用户显示该数据。
谁能告诉我怎么做,好吗?
最佳答案
你不需要在模板代码中使用this.route
,route
就够了。
您可以使用 Elvis 运算符来确保您不会遇到 undefined variable 问题
<h4>{{route?.routeName}}</h4>
或者您可以将所有模板代码包装在 *ngIf 中
<div *ngIf="route!=null">
<h4>{{route.routeName}}</h4>
</div>
关于javascript - Angular - 从 api 加载后在模板中显示数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49219819/