Http Works In Web But Not Working In Actual Android Device ( Ionic Mobile Development )

Problem: my ngfor works perfecty on running web, but when ı emulate my app on real device, its just not working. ı looked all over the internet for solution but couldnt find,

Solution 1:

1. The data variable isn't the array. The MobileHotelDefinitions property inside it is the array. So it's better to define it's type as any instead of Array.
2. Is there any specific need for converting the HTTP observable to a promise? Try to directly use the observable.
3. Include a *ngIf check in the template before using the properties.
4. Notice the use of safe navigation operator ?. in the template. It checks if the parent property is defined before trying to access it's child properties.

Controller

data: any;    // <-- `any` herengOnInit() {
  this.httpService.getMenuObject().subscribe(
    response => {
      this.data = response;
      console.log(this.data);
      if (response.IsGroup == true) {
        this.splashScreen.hide();
      } else {
        this.router.navigate(['folder/Inbox']);
      }
    },
    error => {
      // always good practice to handle HTTP errors
    }
  );
}

Template

<ng-container *ngIf="data"><!-- check here --><ion-card  *ngFor="let otel of data.MobileHotelDefinitions"style="margin: 40px 0;border-radius: 0;"><ion-card-headerstyle="padding: 0;"><ion-img (click)="goToHotel()" [src]="otel?.MobileApplicationDefinition?.GroupImageUrl"></ion-img><divclass="otelName"><divstyle="flex: 1;">{{otel?.Name}}</div><divstyle="color: goldenrod;">★★★★★</div></div></ion-card-header><ion-card-content>
      Keep close to Nature's heart... and break clear away, once in awhile,
      and climb a mountain or spend a week in the woods. Wash your spirit clean.
    </ion-card-content></ion-card></ng-container>

If the issue still persists then the variable update is outside the Angular Zone. Try to wrap the call in NgZone.run() function to run the statement within the Angular zone.

import { Component, NgZone, OnInit } from'@angular/core';

exportclassAppComponent implements OnInit {
  data: any;

  constructor(private zone:NgZone) { }

  ngOnInit() {
    this.httpService.getMenuObject().subscribe(
      response => {
        this.zone.run(() =>this.data = response);    // <-- assign the value within Angular zone and trigger change detectionconsole.log(this.data)
        if (response.IsGroup == true) {
          this.splashScreen.hide();
        } else {
          this.router.navigate(['folder/Inbox']);
        }
      },
      error => {
        // always good practice to handle HTTP errors
      }
    );
  }

Solution 2:

My problem was I was trying to use httpClient(angular one), but on mobile you need ionic http, So There are 2 http:

1. import { HTTP } from '@ionic-native/http/ngx'; //for mobile http requests you have to use this (you can install it from here)
2. import { HttpClient } from "@angular/common/http"; //for browser development you have to use this.

And it was hard to implement the correct http way for mobile, to help you I leave an example mobile http request here. (to prevent having couple of http errors)

My Service.ts

constructor(private http:HTTP, private httpWEB: HttpClient) {

    this.http.setHeader('*', 'Access-Control-Allow-Origin' , '*');
    this.http.setHeader('*', 'Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
    this.http.setHeader('*', 'Accept','application/json');
    this.http.setHeader('*', 'content-type','application/json');
    this.http.setDataSerializer('json');
  }

  post(url:string,body:any):Promise<any>{    
    returnnewPromise((resolve, reject) => {
      this.http.setDataSerializer('json');
      this.http.post(url, body, {}).then(res =>{
        resolve(JSON.parse(res.data));
      })
      .catch(err =>{
        reject(err);
      });
    });
  }

in Config.xlm update this section to prevent clearTextTraffic error for http request

<edit-configfile="app/src/main/AndroidManifest.xml"mode="merge"target="/manifest/application"xmlns:android="http://schemas.android.com/apk/res/android"><applicationandroid:networkSecurityConfig="@xml/network_security_config" /><applicationandroid:usesCleartextTraffic="true" /></edit-config>

And also update your network_securty_config.xml

<?xml version="1.0" encoding="utf-8"?><network-security-config><domain-configcleartextTrafficPermitted="true"><domainincludeSubdomains="true">localhost</domain><domainincludeSubdomains="true">testapi.xxx.com</domain></domain-config></network-security-config>