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

ionic g service service/http

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();
  });
});

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);
      })
    })
  }
}

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

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