使用 ionic 3 发布表单数据答案

【问题标题】：Post form data with ionic 3使用 ionic 3 发布表单数据
【发布时间】：2019-03-07 21:31:18
【问题描述】：

我想传递注册表单的输入值以将它们发布到 rest API。我在提供者（user.ts）中提出我的 API 请求。我在请求的正文中添加了我的表单数据并在传递表单值时遇到了问题给提供者。

我的模板：

  <ion-row>
    <ion-col col-12 pager> 

          <ion-list  class="signupForm">

            <ion-item class="input1">
              <ion-label floating>Full Name</ion-label>
              <ion-input type="text" [(ngModel)]="userData.fullName" name="fullName" ></ion-input>
            </ion-item>

            <ion-item class="">
              <ion-label floating>
                  <ion-icon name="mail"></ion-icon> 

                Email</ion-label>
              <ion-input    [(ngModel)]="userData.email" pattern=""  type="Email" ></ion-input>

          </ion-item>


          <ion-item>
              <ion-label floating>
                <ion-icon name="lock"></ion-icon> 
                Password
              </ion-label>
              <ion-input   type="password" [(ngModel)]="userData.password" name="password" ></ion-input>
            </ion-item>


            <ion-item class="input2">

              <button class="regButton" type="submit" ion-button full round  (click)="doSignup()" >Sign Up</button>

            </ion-item>
          </ion-list>
                      </ion-col>
  </ion-row>

我的组件：

          @Component({
              selector: 'page-signup',
               templateUrl: 'signup.html',
               providers: [UserProvider] // ADD HERE -> Also add in 
               App.module.ts

                 })
               export class SignupPage {

                  loading: any;
                   profiletype : string;



                    constructor(private UserProvider : UserProvider ,public 
                    navCtrl: NavController, public navParams: NavParams, 
                     public authService: UserProvider, public loadingCtrl: 
                    LoadingController, private toastCtrl: ToastController) { 
                     }

                    responseData : any;

                    userData = {"fullName": "","email": "", "acc_type": 
                    "","password": ""};

                    doSignup() {
                   this.showLoader();
                   this.authService.register(this.userData).then((result) => 
                   {
                     this.loading.dismiss();
                    this.navCtrl.pop();
                    }, (err) => {
                     this.loading.dismiss();
                     this.presentToast(err);
                     console.log(this.userData.acc_type)

                });
                  }

                      showLoader(){
                    this.loading = this.loadingCtrl.create({
                      content: 'Authenticating...'
                     });

                   this.loading.present();
                    }

                     presentToast(msg) {
                  let toast = this.toastCtrl.create({
                 message: msg,
               duration: 3000,
               position: 'bottom',
               dismissOnPageChange: true
                });

              toast.onDidDismiss(() => {
               console.log('Dismissed toast');
                  });

              toast.present();
                 }

我的提供者：

                   import { Injectable } from '@angular/core';
                   import { Http, Headers } from '@angular/http';
                   import { HttpModule } from '@angular/http';

            import 'rxjs/add/operator/map';
            import { elementEventFullName } from '@angular/core/src/view';


           let apiUrl = '';

            @Injectable()
            export class UserProvider {

              userData = {"fullName": "","email": "", "acc_type": 
               "","password": ""};

                data = {

                "email": this.userData.email,
                "Type_Id": this.userData.acc_type,
                "Create_DateTime": "2018-10-02T15:18:10.715Z",
                "password": this.userData.password,
                 "name": this.userData.fullName


                  }


               constructor(public http : Http) {
            console.log('Hello AuthService Provider');
            }
              register(data) {
             return new Promise((resolve, reject) => {
                let headers = new Headers();
              headers.append('Content-Type', 'application/json');

                this.http.post(apiUrl+'Regestier', data, {headers: headers})
                .subscribe(res => {
                resolve(res.json());
                }, (err) => {
                  reject(err);

                 });
                });
                 }

                           }

我陷入了这个问题，无法解决。

【问题讨论】：

有什么问题？有没有显示错误？
Api 请求：400（错误请求）。当我尝试 console.log 来自提供者的输入值时，我没有记录
你确定post函数的url正确吗？
是的，当我尝试使用特定值时它的工作
你的apiUrl 是空的，它在代码的什么地方被设置？

标签： angular typescript api ionic-framework ionic3

【解决方案1】：

据观察，您的 apiUrl 是空白的。还需要验证您在发布 API 中传递的数据。假设一切正常（即 apiUrl 和 post api 中的有效负载数据），您的代码中只有更正才会添加 JSON.stringify。请通过添加以下内容来更新您现有的代码：

this.http.post(apiUrl+'Regestier', JSON.stringify(data), {headers: headers})
.subscribe(res => {
    resolve(res.json());
}, (err) => {
    reject(err);
});

【讨论】：