我是ionic的新手，我无法在ionic 3中向woo-commerce api发布数据和表单。
billing-form.html
keytool -exportcert -keystore user.keystore -list -v
<ion-header no-border class="billing-header">
<ion-navbar color="header">
<button ion-button menuToggle>
<ion-icon name="menu">
</ion-icon>
</button>
<ion-title text-wrap text-center>{{"Checkout" | translate}}
</ion-title>
</ion-navbar>
billing-form.ts
<div class="check-box" *ngIf="!values.isLoggedIn">
<ion-item class="Returningcustomer" no-lines>
<ion-label>{{"Returning customer? Login here" | translate}}
<ion-icon ios="ios-log-in" md="md-log-in"> </ion-icon>
</ion-label>
<ion-checkbox checked="true" [(ngModel)]="form.islogin" name="subscribe">
</ion-checkbox>
</ion-item>
</div>
<div *ngIf="form.islogin" class="login-form">
<form #f="ngForm">
<ion-list>
<ion-item>
<ion-input required type="email" [(ngModel)]="form.username" name="firstname" placeholder="{{'Username' | translate}}"> </ion-input>
<ion-icon name="md-person" item-left></ion-icon>
</ion-item>
<ion-item>
<ion-input required type="password" [(ngModel)]="form.password" name="password" placeholder="{{'Password' | translate}}"> </ion-input>
<ion-icon name="md-lock" item-left></ion-icon>
</ion-item>
</ion-list>
<div class="login-button">
<button ion-button block color="button-color" type="submit" text-uppercase [disabled]="buttonSubmitLogin" (click)="login(loginData)">{{LogIn | translate}}
</button>
</div>
</form>
</div>
<div *ngIf="form">
<form #f="ngForm" class="form">
<ion-list no-margin>
<ion-item class="side-heading-background" style="margin-bottom:5px;">
<ion-label color="side-heading-color">{{"Billing Address" | translate}} </ion-label>
</ion-item>
<ion-item>
<ion-label floating>{{"First Name" | translate}} </ion-label>
<ion-input required type="text" [(ngModel)]="form.billing_first_name" name="firstname"> </ion-input>
</ion-item>
<ion-item>
<ion-label floating>{{"Last Name"| translate}} </ion-label>
<ion-input required type="text" [(ngModel)]="form.billing_last_name" name="lastname"> </ion-input>
</ion-item>
<ion-item>
<ion-label floating>{{"Phone" | translate}} </ion-label>
<ion-input required type="number" [(ngModel)]="form.billing_phone" name="telephone"> </ion-input>
</ion-item>
<ion-item>
<ion-label floating>{{"Street Address" | translate}}</ion-label>
<ion-input required type="text" [(ngModel)]="form.billing_address_1" name="street1"> </ion-input>
</ion-item>
<ion-item>
<ion-label floating>{{"Apartment" | translate}}, {{"suite" | translate}}, {{"unit" | translate}} {{"etc" | translate}}</ion-label>
<ion-input required type="text" [(ngModel)]="form.billing_address_2" name="street2"> </ion-input>
</ion-item>
<ion-item>
<ion-label floating>{{"Email" | translate}} </ion-label>
<ion-input required type="email" [(ngModel)]="form.billing_email" name="email"> </ion-input>
</ion-item>
<ion-item>
<ion-label floating>Town / {{"City" | translate}} </ion-label>
<ion-input required type="text" [(ngModel)]="form.billing_city" name="city"> </ion-input>
</ion-item>
<ion-item>
<ion-label floating>{{"Postcode" | translate}} </ion-label>
<ion-input required type="number" [(ngModel)]="form.billing_postcode" name="postcode"> </ion-input>
</ion-item>
<ion-item>
<ion-label> {{"Country" | translate}}
</ion-label>
<ion-select [(ngModel)]="form.billing_country" name="billing_country">
<ion-option value="IN">INDIA
</ion-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label> {{"State" | translate}} </ion-label>
<ion-select [(ngModel)]="form.billing_state" name="billing_state">
<ion-option value="UP">Uttar Pradesh </ion-option>
</ion-select>
</ion-item>
</ion-list>
<div class="check-box" style="margin: 10px 0 0">
<ion-item *ngIf="!values.isLoggedIn" no-lines class="create-account">
<ion-label>{{"Create Account" | translate}} ?</ion-label>
<ion-checkbox checked="false" [(ngModel)]="form.register" name="subscribe"> </ion-checkbox>
</ion-item>
</div>
<div *ngIf="form.register" class="create-account-form login-form">
<form #f="ngForm">
<ion-list>
<ion-label> {{"Create an account by entering the information below. If you are a returning customer please login at the top of the page" | translate}}. </ion-label>
<ion-item>
<ion-input required type="text" [(ngModel)]="form.username" name="username" placeholder="{{'Username' | translate}}"> </ion-input>
<ion-icon name="md-person" item-left></ion-icon>
</ion-item>
<ion-item>
<ion-input required type="password" [(ngModel)]="form.password" name="password" placeholder="{{'Password' | translate}}"> </ion-input>
<ion-icon name="md-lock" item-left></ion-icon>
</ion-item>
</ion-list>
</form>
</div>
service.ts
import { Component } from '@angular/core';
import { NavController, NavParams,AlertController } from 'ionic-angular';
import { InAppBrowser } from '@ionic-native/in-app-browser';
import { CheckoutService } from '../../../providers/service/checkout-service';
import { Functions } from '../../../providers/service/functions';
import { Values } from '../../../providers/service/values';
import { OrderSummary } from '../../checkout/order-summary/order-summary';
import { TermsCondition } from '../../checkout/terms-condition/terms-condition';
import { DatePipe } from '@angular/common';
import { Config } from '../../../providers/service/config';
import {Http } from '@angular/http';
@Component({
templateUrl: 'billing-address-form.html'
})
export class BillingAddressForm {
billingAddressForm: any;
newDate:any;
billing: any;
regions: any;
status: any;
errorMessage: any;
address: any;
form: any;
states: any;
OrderReview: any;
loginData: any;
id: any;
couponStatus: any;
showCreateAccont: boolean = false;
buttonSubmit: boolean = false;
buttonSubmitLogin: boolean = false;
buttonSubmitCoupon: boolean = false;
loading: boolean = false;
PlaceOrder: any;
buttonText1: any;
LogIn: any;
mydate: any;
time: any;
date: any;
selectedDate: any;
shipping: any;
order: any;
buttonText : any;
chosen_shipping: any;
dates: any;
constructor(public http:Http,private config: Config,public alertCtrl: AlertController,public iab: InAppBrowser, public nav: NavController, public service: CheckoutService, params: NavParams, public functions: Functions, public values: Values) {
this.PlaceOrder = "Place Order";
this.buttonText1 = "Apply";
this.LogIn = "LogIn";
this.loginData = [];
this.dates = [];
//this.viewTime();
this.form = params.data;
this.billing = {};
//this.billing.shipping = true;
this.form.billing_country = 'IN';
this.form.billing_state = 'UP';
this.form.shipping_country = 'IN';
this.form.shipping_state = 'UP';
this.billing.save_in_address_book = true;
this.getRegion(this.form.billing_country);
this.getRegion(this.form.shipping_country);
this.form.shipping = false;
this.shipping = {};
this.shipping.save_in_address_book = true;
this.getRegion(this.form.billing_country);
//this.service.getDate()
// .then((results) => {if(results['success']) this.mydate = results['bookable_dates']});
}
getRegion(countryId) {
this.states = this.form.state[countryId];
this.service.updateOrderReview(this.form)
.then((results) => this.handleOrderReviews(results));
}
handleOrderReviews(results){
this.loading = false
this.OrderReview = results;
this.chosen_shipping = this.OrderReview.chosen_shipping;
console.log(this.chosen_shipping);
}
checkout() {
this.buttonSubmit = true;
this.PlaceOrder = "Placing Order";
if (!this.form.shipping) {
this.form.shipping_first_name = this.form.billing_first_name;
this.form.shipping_last_name = this.form.billing_last_name;
this.form.shipping_company = this.form.billing_company;
this.form.shipping_address_1 = this.form.billing_address_1;
this.form.shipping_address_2 = this.form.billing_address_2;
this.form.shipping_city = this.form.billing_city;
this.form.shipping_country = this.form.billing_country;
this.form.shipping_state = this.form.billing_state;
this.form.shipping_postcode = this.form.billing_postcode;
}
if (this.form.payment_method == 'bacs' || this.form.payment_method == 'cheque' || this.form.payment_method == 'cod') {
this.service.checkout(this.form)
.then((results) => this.handleBilling(results));
}
else if (this.form.payment_method == 'stripe') {
this.service.getStripeToken(this.form)
.then((results) => this.handleStripeToken(results));
}
else {
this.service.checkout(this.form)
.then((results) => this.handlePayment(results));
}
}
handlePayment(results) {
if (results.result == 'success') {
var options = "location=no,hidden=yes,toolbar=yes";
let browser = this.iab.create(results.redirect, '_blank', options);
browser.show();
browser.on('loadstart').subscribe(data => {
if (data.url.indexOf('order-received') != -1 && data.url.indexOf('return=') == -1) {
this.values.cart = [];
this.values.count = 0;
var str = data.url;
var pos1 = str.lastIndexOf("/order-received/");
var pos2 = str.lastIndexOf("/?key=wc_order");
var pos3 = pos2 - (pos1 + 16);
var order_id = str.substr(pos1 + 16, pos3);
this.nav.push(OrderSummary, order_id);
browser.hide();
}
else if (data.url.indexOf('cancel_order=true') != -1 || data.url.indexOf('cancelled=1') != -1 || data.url.indexOf('cancelled') != -1) {
browser.close();
this.buttonSubmit = false;
}
});
browser.on('exit').subscribe(data => {
this.buttonSubmit = false;
});
}
else if (results.result == 'failure') {
this.functions.showAlert("STATUS", results.messages);
this.buttonSubmit = false;
}
}
checkoutStripe() {
this.buttonSubmit = true;
this.PlaceOrder = "Placing Order";
this.service.getStripeToken(this.form)
.then((results) => this.handleStripeToken(results));
}
handleStripeToken(results) {
if (results.error) {
this.buttonSubmit = false;
this.PlaceOrder = "Place Order";
this.functions.showAlert("ERROR", results.error.message);
}
else {
this.service.stripePlaceOrder(this.form, results)
.then((results) => this.handleBilling(results));
this.buttonSubmit = false;
}
}
handleBilling(results) {
if (results.result == "success") {
var str = results.redirect;
var pos1 = str.lastIndexOf("order-received/");
var pos2 = str.lastIndexOf("?key=wc_order");
var pos3 = pos2 - (pos1 + 15);
var order_id = str.substr(pos1 + 15, pos3);
this.nav.push(OrderSummary, order_id);
}
else if (results.result == "failure") {
this.functions.showAlert("ERROR", results.messages);
}
this.buttonSubmit = false;
this.PlaceOrder = "Place Order";
}
login() {
if (this.validateForm()) {
this.buttonSubmitLogin = true;
this.LogIn = "Please Wait";
this.service.login(this.form)
.then((results) => this.handleResults(results));
}
}
validateForm() {
if (this.form.username == undefined || this.form.username == "") {
return false
}
if (this.form.password == undefined || this.form.password == "") {
return false
}
else {
return true
}
}
handleResults(a) {
this.buttonSubmitLogin = false;
this.LogIn = "LogIn";
//this.form.shipping = true;
if (a.user_logged) {
this.form = a;
this.states = this.form.state[this.form.billing_country];
this.values.isLoggedIn = a.user_logged;
this.values.customerName = a.billing_first_name;
this.values.customerId = a.user_id;
this.values.logoutUrl = a.logout_url;
}
else {
this.functions.showAlert("Error", 'Login unsuccessful. try again');
}
}
createAccount() {
this.showCreateAccont = true;
}
changePayment() {
this.form.payment_instructions = this.form.payment[this.form.payment_method].description;
this.buttonSubmit = false;
this.buttonText = "Continue to " + this.form.payment[this.form.payment_method].method_title;
}
terms(){
this.nav.push(TermsCondition, this.form.terms_content);
}
updateOrderReview() {
this.loading = true;
this.form.shipping_method = this.chosen_shipping;
this.service.updateOrderReview(this.form)
.then((results) => this.handleOrderReviews(results));
}
ionViewCanEnter(){
let url = 'http://api.timezonedb.com/v2.1/get-time-zone?key=8304HG08Q&format=json&by=zone&zone=Asia/Kolkata';
this.http.request(url, this.config.options)
.map(res => res.json())
.subscribe((response: any) => {
console.log(response);
console.log(response.timestamp);
var data = response.timestamp - 19800 ;
const datePipe = new DatePipe('en-US');
const time = datePipe.transform(data*1000, 'h:mm a');
console.log(time);
//const datePipe = new DatePipe('en-US');
// const serverDate = datePipe.transform(response.timestamp*1000, 'dd/MM/yyyy');
if(time >='16:00 PM'){
data = data+172800;
console.log("hello")
}
else{
data = data+86400;
console.log("exit")
}
let newDate = datePipe.transform(data*1000, 'dd/MM/yyyy');
for (var i = 1; i < 8; i++) {
var value = data+(86400*i);
newDate = datePipe.transform(value*1000, 'dd/MM/yyyy');
this.dates.push(newDate);
}
}, (err) => {
let alert = this.alertCtrl.create({
title: 'Error',
subTitle: 'Please check your credentials',
buttons: ['OK']
});
alert.present();
});
}
ionViewCanEnter(){
let url = 'http://testing.machine.com/vilwindow/wp-json/wp/v2/deliveryslot';
this.http.get(url, this.config.options)
.map(res => res.json())
.subscribe((response: any) => {
this.items = response;
response.forEach(item => console.log(item.title.rendered))
// console.log(response)
// // console.log(response[0].title.rendered)
}, (err) => {
let alert = this.alertCtrl.create({
title: 'Error',
subTitle: 'Please check your credentials',
buttons: ['OK']
});
alert.present();
});
}
}
我想将“ newDate”和“ item.title.rendered”值与表单数据一起发送。一旦用户单击“订购”按钮，这些值应与其他表单详细信息一起发布。我无法发布离子3中的数据发送到woocommerce api。