我如何使用Rest API更新Ionic中的数据?

时间:2018-11-04 06:37:39

标签: cordova ionic-framework ionic3

我正在使用后端PHP在ionic中创建类,因此我可以使用Add,View和Delete数据。但是,当它尝试更新无法正常工作时,我不知道该怎么办。请帮助。 这是我的代码:

user-details.html

<ion-header>
  <ion-navbar>
    <ion-title>
        Update Item
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <form (ngSubmit)="updateItem()" ng-controller="AppCtrl">
            <ion-input type="hidden" [(ngModel)]="user.id" name="id"></ion-input>
        <ion-item>
            <ion-label>Name</ion-label>
            <ion-input type="text" [(ngModel)]="user.name" name="name"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label>Phone</ion-label>
            <ion-input type="tel" [(ngModel)]="user.mobile" name="mobile"></ion-input>
        </ion-item>
        <ion-item>
            <ion-label>Birth</ion-label>
            <ion-datetime displayFormat="DD/MM/YYYY" [(ngModel)]="user.bday" name="bday"></ion-datetime>
        </ion-item>
        <ion-item>
            <ion-label>Gender</ion-label>
            <ion-select name="gender" [(ngModel)]="user.gender">
                <ion-option value="male">Male</ion-option>
                <ion-option value="female">Female</ion-option>
            </ion-select>
        </ion-item>  
        <ion-item>
            <ion-label>Type</ion-label>
            <ion-select name="occasion" [(ngModel)]="user.occasion">
                <ion-option value="birthday">Birthday</ion-option>
                <ion-option value="anniversary">Anniversary</ion-option>
            </ion-select>
        </ion-item>
        <button ion-button type="submit" block>Update</button>
    </form>
</ion-content>

user-details.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { ApiProvider } from './../../providers/api/api';

@IonicPage()
@Component({
  selector: 'page-user-details',
  templateUrl: 'user-details.html',
})
export class UserDetailsPage {
  user = {id: '', name: '', mobile: '', bday: '', gender: '', occasion: ''};

  constructor(public navCtrl: NavController, public navParams: NavParams, public httpClient: HttpClient, public apiProvider: ApiProvider) {
    this.user = this.navParams.get('user');
  }

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

  updateItem(name: string) {
    this.apiProvider.updateItem(this.user).then((result) => {
      console.log(result);
    }, (err) => {
      console.log(err);
    });
  }
}

api.ts

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

@Injectable()
export class ApiProvider {
    baseUrl = 'http://siteforhosting.co.in/bday-reminder-api';

  constructor(public http: HttpClient) {
    console.log('Hello ApiProvider Provider');
  }

  getusers() {
    return this.http.get('http://urls/project/fetch_info.php');
  }

  saveItem(data) {
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');

    return new Promise((resolve, reject) => {
      this.http.post(this.baseUrl+'/insert_info.php', JSON.stringify(data))
        .subscribe(res => {
          resolve(res);
        }, (err) => {
          reject(err);
        });
    });
  }

  updateItem(data) {
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');

    return new Promise((resolve, reject) => {
      this.http.post(this.baseUrl+'/update1.php', JSON.stringify(data))
        .subscribe(res => {
          resolve(res);
        }, (err) => {
          reject(err);
        });
    });
  }
}

这是我的网络回复:

enter image description here

这是我的离子信息:

D:\ionic\project>ionic info
√ Gathering environment info - done!

Ionic:

   ionic (Ionic CLI)  : 4.2.1 (C:\Users\RAJENDRA-PC\AppData\Roaming\npm\node_mod
ules\ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : not installed
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (0 plugins total)

System:

   Android SDK Tools : 26.1.1 (D:\Android\Sdk)
   NodeJS            : v8.11.3 (C:\Program Files\nodejs\node.exe)
   npm               : 5.6.0
   OS                : Windows 7


D:\ionic\project>

请帮帮我...

1 个答案:

答案 0 :(得分:0)

您没有显示错误消息,也没有显示您的update.php文件