angular - Ionic3 Angular5- '[object Object]'을 (를) 확산시키는 중 오류가 발생했습니다 배열과 이터 러블 만 허용됩니다

로컬 웹 서비스에서 데이터를 가져 오려고하지만 앱에서 값을 인쇄 할 수 없습니다

이것은 내 코드입니다 :

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 {
  apiUrl="http://localhost/MyWebService/api/getteams.php";
  constructor(public http: HttpClient) {
    console.log('Hello TeamDataProvider Provider');
  }
  getTeams(): Observable<string[]> {
    return this.http.get(this.apiUrl).pipe(
      map(this.extractData),
      catchError(this.handleError)
    );
  }
  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);
  }
  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 {
  arrayTeam: Array<any> = [];
  errorMessage: string; 
  constructor(public navCtrl: NavController, public navParams: NavParams, public teamDataProvider: TeamDataProvider) {
  }
  getTeam() {
    this.teamDataProvider.getTeams()
       .subscribe(
          teams => this.arrayTeam = teams,
          error =>  this.errorMessage = <any>error);
  }
  ionViewDidLoad(){
   this.teamDataProvider.getRemoteData();
   this.getTeam();
  } 
}

home.html :

<ion-header>
  <ion-navbar>
    <ion-title>
      Team List
    </ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <ion-item>Team List</ion-item>
    <ion-list *ngFor="let team of arrayTeam">
      <ion-item >
        <ion-item>id: {{team.id}} name: {{team.name}} member: {{team.member}}</ion-item>
      </ion-item>
    </ion-list>
</ion-content>

무엇이 잘못 되었나요? comand ionic serve를 실행할 때 :

Error trying to diff '[object Object]'. Only arrays and iterables are allowed

이것은 URL에서받은 날짜입니다 :

{
  "teams": [
    {
      "id": 2,
      "name": "updated",
      "member": 4
    },
    {
      "id": 3,
      "name": "cambiato",
      "member": 8
    },
    {
      "id": 4,
      "name": "test",
      "member": 3
    },
    {
      "id": 5,
      "name": "sadasd",
      "member": 2
    }
  ]
}