ionic4 接收API数据库传值并显示

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yujing1314/article/details/89554551

接收数据库通过API传的数据并显示

---

通过如下命令建立公共服务组件

ionic g service service/http

如图

服务组件

common.service…spec.ts文件的内容

import { TestBed } from '@angular/core/testing';

import { CommonService } from './common.service';

describe('CommonService', () => {
  beforeEach(() => TestBed.configureTestingModule({}));

  it('should be created', () => {
    const service: CommonService = TestBed.get(CommonService);
    expect(service).toBeTruthy();
  });
});

common.service.ts文件的内容

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';


@Injectable({
  providedIn: 'root'
})
export class CommonService {

  public config:any={
    domain:'你自己的服务器的网址' 
  }
  constructor(public http:HttpClient) {}

  ajaxGet(url){
    var api=this.config.domain + url;
    return new Promise ((resove,reject) =>{
      this.http.get(api).subscribe((response)=>{
        resove(response);
      },(error)=>{
        reject(error);
      })
    })
  }
}

ts文件

引用公共服务

import { CommonService } from './../../services/common.service';

定义接收数据的数组

export class OrderdetailsPage implements OnInit {

  public list: any = [];
  }

添加方法

//接收Api传过来的数据
  requestData(orderid) {
    //订单查询
    var api = 'OrderSystem/OrderDetailSheet/QueryNotTakeFoodDetail?OrderID=08081058530815';
    this.common.ajaxGet(api).then((response:any) =>{
      console.log(response);
      this.list = response;
      
   }).catch((err)=>{
     console.log(err)
   })
  
  }

html文件

 <h4>主食</h4>
    <ion-item *ngFor="let item of list">
      {{item.foodName}}
      <span> x{{item.num}}</span>
      <span> ￥{{item.price}}.00</span>

效果图