Ошибка JSON при выполнении входа с использованием API в Ionic - PullRequest
Новая
       25

Ошибка JSON при выполнении входа с использованием API в Ionic

0 голосов
/ 12 января 2019

Я выполняю вход через API в Ionic, но получаю сообщение об ошибке:

Ошибка: свойство 'json' не существует для типа '{}'.

Это мой 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>

Это мой 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) {
      this.getloginUsers();
  }

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

    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
   });

 }
}

Это код this.responseData = result.json(); ошибка приходит.

Ошибка: свойство 'json' не существует для типа '{}'.

Это мой Сервис Restapi.ts : 

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { HttpHeaders } from '@angular/common/http';
import { Response } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/timeout'

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

@Injectable()
export class RestapiProvider {

  token:any;

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


  getUsers(credentials, type) {
    return new Promise((resolve, reject) => {
      var headers = new HttpHeaders();
      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: Response) => {
        resolve(res);
      }, (err) => {
          reject(err);
        });
    });
  }
}

Я включил FormsModule в app.module.ts. Любая помощь очень ценится.

1 Ответ

0 голосов
/ 12 января 2019

Поскольку вы используете HttpClient, вам не нужно обычно использовать result.json();

 this.responseData = result;

Также вам не нужно использовать Promise, измените код услуги следующим образом, 

 getUsers(credentials, type) {
      var headers = new HttpHeaders();
      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');
      return this.http.post(apiUrl + type, JSON.stringify(credentials), {headers: headers});
  }

и в вашем компоненте 

this.restProvider.getUsers(this.userData,'user_Login').subscribe((data) => {
    console.log(data);
});
...