ionic 3显示从api到html的数据

Question

我需要您的帮助，我需要从api中获取一些数据。 我需要在应用程序中显示数据（使用html格式），可以告诉我在.html中显示不佳的内容吗？ 这是代码。在数据中有100个带有name字段的数组。 我只想在列表中显示名称，例如list中的100 name。 谢谢

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HospitalPage } from '../hospital/hospital';
import { Observable } from 'rxjs/Observable';
import { HttpClient, HttpHeaders } from '@angular/common/http';



@Component({
  selector: 'page-home',
  templateUrl: 'home.html' 
})
export class HomePage {

data: Observable<any>;
galleryType = 'pintrest';
token: string;


  constructor(public navCtrl: NavController, public httpClient: 
  HttpClient) {

    this.token = "ee66cf61762eab785b006186dbc8c980";


  }

  getDataUsingToken(token) { 
     return this.httpClient.get('url.com', 
  {headers:new HttpHeaders({
              'token': token
             }
           )
         }
       ) 
     }

ngOnInit() { 
   this.getDataUsingToken(this.token).subscribe(data=>{ 
   this.data = data;
   console.log(data); 

   },

   err => console.log(err.message)
  );
 } 

}

Answer 1

我无法访问您的API，但是如果数据像您所说的那样结构化，那应该可以

<p *ngFor="let item of data.records">{{item.name}}<p>

Answer 2

这样的事情可以为您工作

<ion-list>
        <ion-item *ngFor="let item of renderData">
            <ion-label>{{item.name}}</ion-label>
        </ion-item>
        <ion-item>
            <button ion-button color="primary" (click)="prev()"><<</button>
<button ion-button color="primary" (click)="next()">>></button>
  </ion-item>
</ion-list>

这将按10项处理显示数据

  getData( ) {
     this.renderData = this.data.slice(this.currentIndex,this.currentIndex+10)
  }

  next() {
    if ( (this.currentIndex +10) < this.data.length) {
      this.currentIndex +=10;
      this.getData();
    }
  }

  prev(){
  if ( (this.currentIndex -10) >=0) {
      this.currentIndex -=10;
      this.getData();
    }

  }

演示🚀🚀

Answer 3

.ts

 import { Component } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
 import { Observable } from 'rxjs/Observable';

 import { HttpClient, HttpHeaders } from '@angular/common/http';


@IonicPage()
@Component({
  selector: 'page-hospital',
  templateUrl: 'hospital.html',
})
export class HospitalPage {

data: Observable<any>;
  token: string;

  constructor(public navCtrl: NavController, public navParams: NavParams, public httpClient: HttpClient) {

      this.token = "ee66cf61762eab785b006186dbc8c980";


  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad HospitalPage');
  }

getDataUsingToken(token) { 
         return this.httpClient.get('http://api.igiinsurance.com.pk:8888/insurance_takaful/insurance-api/get_panel_hospitals.php?offset=0&limit=100',{headers:new HttpHeaders({
                  'token': token
                 }
               )
             }
          ) 
      }


list;


ngOnInit() { 
    this.getDataUsingToken(this.token).subscribe(data=>{ 
      console.log(data); 
            this.list = data.records;

            console.log(data.records); 


    },

    err => console.log(err.message)
    );
  } 

}

.html

<ion-content>
  <ion-item >
    <p *ngFor="let item of list">{{item.name}}<p>
  </ion-item>
</ion-content>