我正在尝试显示我提取的远程数据,从IonicPage到使用ng-repeat的模板视图。
如何将我获取的远程数据显示到离子html视图中?
跑Ionic-4。我试图记录获取的远程数据,网络通话没问题。在获取远程数据之前似乎是模板视图加载。
1 - 以下方法加载数据
public onLoadData(){
this.http.get(this.cfg.fetchPlatformUrl()).subscribe((data: any) => {
this.remoteData = data;
});
}
2 - 以下方法从IonicPage变量获取数据
public getRemoteExerciseData(){
return this.exerciseVideos;
}
3 - 其模板视图代码未按我的预期列出。
<ion-list>
<ion-list-header>
<ion-label>
<b>Exercise List</b></i>
</ion-label>
</ion-list-header>
<!-- START - ISSUE IDENTIFIER -->
<ion-item ng-repeat="ex in getRemoteExerciseData()">
Video 1
<ion-chip color="success">
<ion-label>V</ion-label>
<ion-icon name="happy" color="success"></ion-icon>
</ion-chip>
<ion-chip color="danger">
<ion-label>X</ion-label>
<ion-icon name="sad" color="danger"></ion-icon>
</ion-chip>
</ion-item>
<!-- END - ISSUE IDENTIFIER -->
</ion-list>
我希望看到获取的远程数据列表,但实际模板视图只显示一个。
练习清单
<!-- START - ISSUE IDENTIFIER -->
<ion-item *ngFor="ex in getRemoteExerciseData()">
Video 1
<ion-chip color="success">
<ion-label>V</ion-label>
<ion-icon name="happy" color="success"></ion-icon>
</ion-chip>
<ion-chip color="danger">
<ion-label>X</ion-label>
<ion-icon name="sad" color="danger"></ion-icon>
</ion-chip>
</ion-item>
<!-- END - ISSUE IDENTIFIER -->
对于最新的Angular版本,你应该使用ngFor