How to display remote data into ionic-view?

Question

I'm trying to display my fetched remote data, from IonicPage to template view using ng-repeat.

How to display my fetched remote data into ionic html view?

Running Ionic-4. I’ve tried to log fetched remote data, web call is ok. It seems template-view load before fetched-remote-data.

1 - Following method load data

  public onLoadData(){
    this.http.get(this.cfg.fetchPlatformUrl()).subscribe((data: any) => {
      this.remoteData = data;
    });
  }

2 - Following method get data from IonicPage variable

public getRemoteExerciseData(){
    return this.exerciseVideos;      
  }

3 - its template view code does not listing as i expected.

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

I expect see the list of fetched remote data, but the actual template view show only one.

Utpaul · Accepted Answer · 2019-04-06 12:09:44Z

1

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

answered Apr 6, 2019 at 12:09

Utpaul

2,1172 gold badges13 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Steve T · Accepted Answer · 2019-04-06 12:00:08Z

0

For latests Angular versions, you should use ngFor

answered Apr 6, 2019 at 12:00

Steve T

5724 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to display remote data into ionic-view?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related