Ionic 3 Angular 5获取来自webService的请求 [英] Ionic 3 Angular 5 get request from webService

问题描述

我正在尝试从本地网络服务获取数据，但我无法在应用中打印这些值。

I'm trying to get data from a local web service but I cannot print the values ​​in the app.

这是我的代码：

team-data.ts ：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { map, catchError } from 'rxjs/operators';
import 'rxjs/add/operator/map';

@Injectable()
export class TeamDataProvider {
  constructor(public http: HttpClient) {
    console.log('Hello TeamDataProvider Provider');
  }

 apiUrl="http://localhost/MyWebService/api/getteams.php";

 private extractData(res: Response) {
    let body = res;
    return body || {};
  }

  private handleError (error: Response | any) {
    let errMsg: string;
    if (error instanceof Response) {
      const err = error || '';
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
      errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
  }

  getTeams(): Observable<string[]> {
    return this.http.get(this.apiUrl).pipe(
      map(this.extractData),
      catchError(this.handleError)
    );
  }

  getRemoteData(){
    this.http.get(this.apiUrl).map(res => res).subscribe(data => {
    console.log(data);
    });
  }

}

app.module。 ts ：

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { TeamDataProvider } from '../providers/team-data/team-data';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpClientModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    TeamDataProvider
  ]
})
export class AppModule {}

home.ts ：

import { TeamDataProvider } from '../../providers/team-data/team-data';
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  constructor(public navCtrl: NavController, public navParams: NavParams, public teamDataProvider: TeamDataProvider) {

   this.getTeam();

  }

  teams: string[];
  errorMessage: string;

  getTeam() {
    this.teamDataProvider.getTeams()
       .subscribe(
        teams => this.teams = teams,
         error =>  this.errorMessage = <any>error);
  }

  ionViewDidLoad(){
   this.teamDataProvider.getRemoteData();
  } 
}

home.html：

   <ion-header>
    <ion-navbar>
      <ion-title>
        Team List
      </ion-title>
    </ion-navbar>
  </ion-header>
  <ion-content>
    <h2>Team List</h2>
      <ion-list inset>
        <ion-item *ngFor="let team of teams">
          <p>{{team.id}}</p>
          <p>{{team.name}}</p>
          <p>{{team.number}}</p>
        </ion-item>
      </ion-list>
    </ion-content>

当我运行 ionic serve -l <​​/ code>时：

When I run ionic serve -l:

运行时错误找不到支持对象'[object Object]'
类型'object'。 NgFor仅支持绑定到Iterables，例如
Arrays。

Runtime Error Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

我错了什么？

推荐答案

一目了然的几个问题：

• 在你家。 ts和你的提供者在
  构造函数之后声明变量。你应该在此之前完成。


• 还注意到你的团队var应该是对象类型的数组，它是
  string []。确保它不仅是键入的，而且还具有初始值
  （如空数组）等。


• 此外，最好使用IonViewDidLoad生命周期钩子来获取getTeams。
  主要使用构造函数为声明的
  vars分配默认/初始值

import { TeamDataProvider } from '../../providers/team-data/team-data';
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  teams: Array<any> = [];
  errorMessage: string; 
  
  constructor(public navCtrl: NavController, public navParams: NavParams, public teamDataProvider: TeamDataProvider) {
  }

  getTeam() {
    this.teamDataProvider.getTeams()
       .subscribe(
        teams => this.teams = teams,
         error =>  this.errorMessage = <any>error);
  }

  ionViewDidLoad(){
   this.teamDataProvider.getRemoteData();
   this.getTeam();
  } 
}

这篇关于Ionic 3 Angular 5获取来自webService的请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！