APIを使用したIonic 3ログイン認証 - プロパティ' json'の

最初：

モデルのあなたが追加する場合は動作します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ヘッダーはServer Partで実装する必要があります。

• login.tsでは、私はuserData = {"email"： ""、 "password"： ""};を宣言しました。なぜそれがnullを表示しているのですか？ - Raghav
• 停止停止。あなたはヌルですか？credentialsまたはres？ - Konstantin Okhotnick
• credentialsヌルにすることはできません。そしてresそうかもしれない。なぜならresapiから可変です（let apiUrl =＆＃39;192.168.1.10/honeybee/HoneyApi/' ;;） - Konstantin Okhotnick
• null値をとっているため、json nullエラーが表示されています。あなたはnullエラーを解決する答えを提供してください。 - Raghav
• 私はそれがlogin.htmlから値を取る必要があります。 - Raghav

このような方法を変更してください

あなたの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
   });

 }

• login.tsでは、私はuserData = {"email"： ""、 "password"： ""};を宣言しました。なぜそれがnullを表示しているのですか？ - Raghav
• どうやって？私はそうは思わない - Anand Raj
• loginpage.tsでは、私はuserData = {"email"： ""、 "password"： ""}と宣言しています、this.userDataはnullを取っています。 - Raghav
• したがって、アプリケーションを通じて値を入力すると、自動的にuserDataにバインドされます。 - Anand Raj

また、約束の代わりに観察可能な状態に戻すほうが簡単ではないでしょうか？

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

問題はあなたの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; } 'に割り当てることはできません   タイプ '{ヘッダーのパラメータ：HttpHeaders | {[ヘッダー：文字列]：   文字列|文字列[]; }; 「体」を観察する。 params ?: Ht ... '。の種類   プロパティ 'ヘッダー'は互換性がありません。       タイプ 'ヘッダ'はタイプ 'HttpHeaders | {[ヘッダー：文字列]：文字列|文字列[]; } '。         タイプ 'ヘッダ'はタイプ '{[ヘッダ：文字列]：文字列|文字列[]; } '。           ヘッダーの種類にインデックスの署名がありません。

エラーはきれいですので説明は必要ありません。コードを変更しても問題なく動作します。私は自分の地元でテストした。