Angular 无法在ionic中使用Http API调用获取数据

我正在尝试通过angular/ionic应用程序中的Http调用从API获取详细信息，问题是API正在被调用到页面，但无法从中获取详细信息，我正在尝试使用简单的angular表达式（绑定）获取详细信息

service.api.ts

const httpOptions = {
  headers: new HttpHeaders({'Content-type': 'application/jason'})
};

const apiUrl = "http://localhost:3000/api/con_users";

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private http: HttpClient) { }

  private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent){
      console.error('An error occured', error.error.message);
    }
  else{
    console.error(
      `Backend returned code $(error.status), ` +
      'body was: $(error.error)');
    }
    return throwError("Something went wrrong please try again later.");
  }

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

  }

  getDataUser(): Observable<any> {
    return this.http.get(apiUrl, httpOptions).pipe(
      map(this.extractData),
      catchError(this.handleError));
  }
}

@NgModule({
  declarations: [AppComponent],
  entryComponents: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

export class ProfilePage implements OnInit {

  datauser: any;
  constructor(
    public api: ApiService
  ) { }

  ngOnInit() {
    this.getDataUser();
  }

  async getDataUser(){
    await this.api.getDataUser()
    .subscribe(res =>{
      console.log(res);
      this.datauser = res.results;
      console.log(this.datauser);
    }, err => {
      console.log(err);
    });
  }
}

profile.page.ts

const httpOptions = {
  headers: new HttpHeaders({'Content-type': 'application/jason'})
};

const apiUrl = "http://localhost:3000/api/con_users";

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(private http: HttpClient) { }

  private handleError(error: HttpErrorResponse) {
    if (error.error instanceof ErrorEvent){
      console.error('An error occured', error.error.message);
    }
  else{
    console.error(
      `Backend returned code $(error.status), ` +
      'body was: $(error.error)');
    }
    return throwError("Something went wrrong please try again later.");
  }

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

  }

  getDataUser(): Observable<any> {
    return this.http.get(apiUrl, httpOptions).pipe(
      map(this.extractData),
      catchError(this.handleError));
  }
}

@NgModule({
  declarations: [AppComponent],
  entryComponents: [AppComponent],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, HttpClientModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

export class ProfilePage implements OnInit {

  datauser: any;
  constructor(
    public api: ApiService
  ) { }

  ngOnInit() {
    this.getDataUser();
  }

  async getDataUser(){
    await this.api.getDataUser()
    .subscribe(res =>{
      console.log(res);
      this.datauser = res.results;
      console.log(this.datauser);
    }, err => {
      console.log(err);
    });
  }
}

profile.page.html

<ion-content>
<ion-list>
  <ion-item *ngFor="let data of datauser">
    {{data.email}}
  </ion-item>
</ion-list>

</ion-content>

{{data.email}

您在调用

extractData（）

时没有任何参数，但它需要响应。您是否尝试过

map（res=>this.extractData（res））

？我尝试过-map（res=>this.extractData（res）），但它给出了以下错误-*（parameter）res:“Object”类型的对象参数不能分配给“Response”类型的参数。“对象”类型可分配给很少的其他类型。你的意思是用“any”类型吗？类型“Object”缺少类型“Response”中的以下属性：Header、ok、redirected、status等*试试这个：map（（res:any）=>this.extractData（res））你在等待一个可观察的数据。wait用于promisesTried map（（res:any）=>this.extractData（res）），但没有输出