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

最新推荐文章于 2024-12-03 05:37:45 发布

渐暖°

最新推荐文章于 2024-12-03 05:37:45 发布

阅读量1.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： # ionic4

本文链接：https://blog.youkuaiyun.com/yujing1314/article/details/89554551

ionic4 专栏收录该内容

9 篇文章

订阅专栏

本文介绍如何在Ionic Angular项目中创建和使用HTTP服务组件来从服务器获取数据，并在页面上展示。通过示例代码展示了如何定义服务组件、进行单元测试、调用API以及在HTML中绑定数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

接收数据库通过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>
      </ion-item>