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

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

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

效果图

目录
相关文章
|
16天前
ionic 4 点击按钮跳转页面传值并刷新
ionic 4 点击按钮跳转页面传值并刷新
27 2
|
16天前
|
API 数据库 C语言
【C/C++ 数据库 sqlite3】SQLite C语言API返回值深入解析
【C/C++ 数据库 sqlite3】SQLite C语言API返回值深入解析
177 0
|
16天前
|
SQL Java 数据库连接
JDBC Java标准库提供的一些api(类+方法) 统一各种数据库提供的api
JDBC Java标准库提供的一些api(类+方法) 统一各种数据库提供的api
16 0
|
16天前
|
SQL 关系型数据库 API
从API获取数据并将其插入到PostgreSQL数据库:步骤解析
使用Python处理从API获取的数据并插入到PostgreSQL数据库:安装`psycopg2`,建立数据库连接,确保DataFrame与表结构匹配,然后使用`to_sql`方法将数据插入到已存在的表中。注意数据准备、权限设置、性能优化和安全处理。
|
16天前
ionic4 路由跳转传值
ionic4 路由跳转传值
15 0
|
16天前
|
API PHP 数据安全/隐私保护
IMAP邮箱API接收收取邮件的方法和步骤
IMAP邮箱API是用于自动接收和管理邮件的接口,允许程序无须手动登录即可操作邮件。要使用它,需先配置邮箱允许API访问,选择如Python的imaplib或PHP的imap扩展等IMAP库,然后连接到邮箱服务器,接收和处理邮件。处理完毕后断开连接。AokSend提供高效发信服务,支持SMTP/API接口。使用IMAP API能提升邮件管理效率。
|
16天前
|
前端开发 API 数据库
Django(五):如何在Django中通过API提供数据库数据给前端
Django(五):如何在Django中通过API提供数据库数据给前端
|
16天前
|
数据库连接 API 数据库
SQLite3 数据库 C语言API 打开函数sqlite3_open 详解
SQLite3 数据库 C语言API 打开函数sqlite3_open 详解
80 0
|
14天前
|
关系型数据库 MySQL API
实时计算 Flink版产品使用合集之可以通过mysql-cdc动态监听MySQL数据库的数据变动吗
实时计算Flink版作为一种强大的流处理和批处理统一的计算框架,广泛应用于各种需要实时数据处理和分析的场景。实时计算Flink版通常结合SQL接口、DataStream API、以及与上下游数据源和存储系统的丰富连接器,提供了一套全面的解决方案,以应对各种实时计算需求。其低延迟、高吞吐、容错性强的特点,使其成为众多企业和组织实时数据处理首选的技术平台。以下是实时计算Flink版的一些典型使用合集。
123 0
|
16天前
|
关系型数据库 MySQL 数据库
docker MySQL删除数据库时的错误(errno: 39)
docker MySQL删除数据库时的错误(errno: 39)
88 0

热门文章

最新文章

http://www.vxiaotou.com