HTTP在Web上有效，但在实际的android设备（IONIC移动开发）中不可用

Question

问题：我的ngfor在运行Web时运行完美，但是当ı在真实设备上模拟我的应用程序时，它只是无法工作。我到处看 互联网寻求解决方案，但找不到，就像一个封闭的（那 我怎么想），有人说这是ngZone问题，我没有任何 知道是什么。

我的服务

getMenuObject(): Observable<any> {

    return this.http
      .post("xxxxxxx.xxxxxxxxx.xxxxxxxxx.xxxxxxxxxxx",{ HotelId:25, GroupId:9 });
  }

我的.ts

data: Array<any>=[]

ngOnInit(){
 this.httpService.getMenuObject().toPromise().then(x=>{
      this.data = x;
      console.log(this.data)
      if(x.IsGroup==true){
          this.splashScreen.hide();

       } else{
         this.router.navigate(['folder/Inbox']);
       }
    });
}

我的html：

<ion-card  *ngFor="let otel of data.MobileHotelDefinitions" style="margin: 40px 0;border-radius: 0;">
        <ion-card-header style="padding: 0;">
          <ion-img (click)="goToHotel()" [src]="otel.MobileApplicationDefinition.GroupImageUrl"></ion-img>
          <div class="otelName">
            <div style="flex: 1;">{{otel.Name}}</div>
            <div style="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>

我的控制台：

我在网络浏览器上的应用（离子服​​务--o）：

我在真实android设备（华为android 9）上的应用：

Answer 1

1. data变量不是数组。其中的MobileHotelDefinitions属性是数组。因此，最好将其类型定义为any而不是Array。
2. 是否有将HTTP可观察的HTTP转换为Promise的特定需求？尝试直接使用可观察对象。
3. 使用属性之前，请在模板中包含*ngIf检查。
4. 注意模板中使用safe navigation operator ?.。它会在尝试访问父属性之前检查其父属性是否已定义。

控制器

?.

模板

data: any;    // <-- `any` here

ngOnInit() {
  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
    }
  );
}

如果问题仍然存在，则变量更新位于Angular Zone之外。尝试将调用包装在

<ng-container *ngIf="data">     <!-- check here -->
  <ion-card  *ngFor="let otel of data.MobileHotelDefinitions" style="margin: 40px 0;border-radius: 0;">
    <ion-card-header style="padding: 0;">
      <ion-img (click)="goToHotel()" [src]="otel?.MobileApplicationDefinition?.GroupImageUrl"></ion-img>
      <div class="otelName">
        <div style="flex: 1;">{{otel?.Name}}</div>
        <div style="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>

函数中，以在Angular区域内运行该语句。

NgZone.run()

Answer 2

我的问题是我试图使用httpClient（角形），但是在移动设备上，您需要使用离子http，因此有2个http：

1. 从'@ ionic-native / http / ngx'导入{HTTP}; //对于移动http请求您必须使用此（NgZone.run()）
2. 从“ @ angular / common / http”导入{HttpClient}； //对于浏览器开发，您必须使用此。

而且很难为移动设备实现正确的http方法，以帮助您在此处留下示例移动http请求。 （以防止出现几个HTTP错误）

我的Service.ts

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

export class AppComponent 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 detection
        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
      }
    );
  }

在Config.xlm中更新此部分，以防止http请求出现clearTextTraffic错误

you can install it from here

还要更新您的network_securty_config.xml

 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>{    
    return new Promise((resolve, reject) => {
      this.http.setDataSerializer('json');
      this.http.post(url, body, {}).then(res =>{
        resolve(JSON.parse(res.data));
      })
      .catch(err =>{
        reject(err);
      });
    });
  }