Аутентификация при входе в Ionic 3 с использованием API - не удается прочитать свойство 'json' из null

Question

Я выполняю аутентификацию в Ionic 3 с использованием API, но в процессе входа в систему отображается сообщение об ошибке: Невозможно прочитать свойство 'json' с нулевым значением

Это мои провайдеры> 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

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

<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>

Я получаю свойство Cannot read 'JSON 'из NULL, когда я нажимаю кнопку входа в систему.Любая помощь оценивается заранее.Пожалуйста, помогите.

Answer 1

Проблема в конструкторе restapi.ts, HttpClient, вызывающий проблему;

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

Измените это на

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

У вас есть ошибка на этой части {headers: headers} здесь ваша ошибка:

Аргумент типа '{headers: Headers;} 'нельзя назначить параметру типа' {headers ?: HttpHeaders |{[header: string]: строка |Строка [];};наблюдать ?: "тело";params ?: Ht ... '.Типы свойств «заголовки» несовместимы.Тип «Заголовки» нельзя назначить типу «HttpHeaders |{[header: string]: строка |Строка [];}».Тип «Заголовки» нельзя назначить типу «{[header: string]: string |Строка [];}».Подпись индекса отсутствует в типе «Заголовки».

Ошибка довольно чистая, поэтому не требует объяснения, ваш код будет работать без проблем, если вы сделаете это изменение.Я проверил на моем местном.

Answer 2

Первый :

ngModel работает, если вы добавляете FormsModule в файл конфигурации.

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

Второй :

Отправка данных в формате JSON, добавление 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);

Третий :

Сервер должен вернуть значение успеха .Если в вашем API есть ошибка (нет действительного адреса электронной почты, пароля), верните клиенту ошибку HTTP .

---

CORS заголовки должны быть реализацией на серверной части.

Answer 3

Кроме того, не проще ли вернуть наблюдаемое вместо обещания?

return this.http.post(apiUrl + type, JSON.stringify(credentials), {headers: headers});

Answer 4

Пожалуйста, измените метод следующим образом

В вашем файле ts rest.api.ts

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); ----- Change like this
        }, (err) => {
          reject(err);
        });
    });
  }

в вашем loginpage.ts файле

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

 }