如何将远程数据显示到离子视图中？

Question

我正在尝试使用 ng-repeat 显示我获取的远程数据，从 IonicPage 到模板视图。

如何将我获取的远程数据显示到 ionic 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>

我希望看到获取的远程数据列表，但实际模板视图只显示一个。

Answer 1

对于最新的 Angular 版本，您应该使用 ngFor

Answer 2

练习列表

<!-- 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 -->

如何将远程数据显示到离子视图中？

How to display remote data into ionic-view?

web-services

fetch-api

ionic4