使用API​​的Ionic 3登录身份验证-无法读取null的属性'json' [英] Ionic 3 Login Authentication Using API - Cannot read property 'json' of null

问题描述

我正在使用API​​在Ionic 3中进行身份验证，但是在登录过程中，它显示错误:无法读取null的属性'json'

I am doing authentication in Ionic 3 using API but In the login process, it is showing error: Cannot read property 'json' of null

这是我的提供商> restapi> restapi.ts

This is my providers>restapi>restapi.ts

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

let apiUrl = 'http://192.168.1.10/honeybee/HoneyApi/';

@Injectable()
export class RestapiProvider {

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

  getUsers(credentials, type) {
    return new Promise((resolve, reject) => {
      var headers = new Headers();
      headers.append('Access-Control-Allow-Origin' , '*');
      headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
      headers.append('Accept','application/json');
      headers.append('content-type','application/json');

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

这是我的loginpage.ts

This is my loginpage.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { RestapiProvider } from '../../providers/restapi/restapi';
import { ListPage } from '../list/list';


@IonicPage()
@Component({
  selector: 'page-loginpage',
  templateUrl: 'loginpage.html',
})
export class LoginpagePage {
  responseData : any;
  userData = {"email": "", "password": ""};

  constructor(public navCtrl: NavController, public navParams: NavParams,
    public restProvider: RestapiProvider) {

  }

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

  getloginUsers(){
    this.restProvider.getUsers(this.userData,'user_Login').then((result) => {
     this.responseData = result;
     if(this.responseData.userData){
     console.log(this.responseData);
     console.log("User Details");
     this.navCtrl.push(ListPage);
     }
     else{
       console.log("Incorrect Details"); }
    }, (err) => {
     // Error log
   });

 }

}

这是我的loginpage.html

This is my loginpage.html

<ion-header>
  <ion-navbar>
    <ion-title>loginpage</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding>
  <form (submit)="getloginUsers()">
    <ion-list>

      <ion-item>
        <ion-label fixed>Email</ion-label>
        <ion-input type="email" [(ngModel)]="userData.email" name="email"></ion-input>
      </ion-item>
      <ion-item>
        <ion-label fixed>Password</ion-label>
        <ion-input type="password" [(ngModel)]="userData.password" name="password"></ion-input>
      </ion-item>
      <div padding>
        <button ion-button color="primary" block>Login</button>
      </div>

    </ion-list>
  </form>
</ion-content>

单击登录按钮时，出现无法读取的null属性"json".预先提供的任何帮助.请帮忙.

I am getting a Cannot read property 'json' of null when I click the login button. Any help appreciated in Advance. Please Help.

推荐答案

第一 :

First:

ngModel 可以正常工作.

@NgModule({
  declarations: [ MyApp ],
  imports: [
    FormsModule
    ...
  )],
  bootstrap: [...],
  entryComponents: [ ... ],
  providers: []
})

第二 :

Second:

以JSON格式发送数据，添加Content-Type:

Send data as JSON format, add Content-Type:

getUsers(credentials, type) {
  let headers = new Headers();
  headers.append('Content-Type', 'application/json');

  return this.http
          .post(apiUrl + type, JSON.stringify(credentials), {headers: headers})
          .map(res => res.json());
}

并致电loginpage(无承诺)

this.restProvider.getUsers(this.userData,'user_Login')
    .subscribe(res => this.responseData = result);

第三 :

Third:

后端必须返回成功值.如果您的API错误(没有有效的电子邮件，密码)，则将 HTTP 错误返回给客户端.

Back-end must return success value. If your API has error (no valid email, password) return HTTP error to Client.

CORS 标头必须在服务器上实现部分.

CORS headers must be implementation on the Server Part.

这篇关于使用API​​的Ionic 3登录身份验证-无法读取null的属性'json'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！