如何修复我的数据没有从 Angular 中的服务到模块答案

【问题标题】：How can I fix my data not getting from service to module in Angular如何修复我的数据没有从 Angular 中的服务到模块
【发布时间】：2019-09-10 22:52:42
【问题描述】：

我正在尝试通过服务从 API 获取数据。然后从模块内部记录它，该模块稍后将在列表中显示它。该变量显示在服务的 console.log 中，但当我尝试将其记录到 de 模块时却没有显示

我之前使用 ionic 进行的相同设置，我认为 angular 的工作方式相同，但这里情况并非如此。我已经使用错误处理扩展了 .subscribe 函数，但没有出现错误。我只是不知道去哪里找。

api.service.ts

getPlacesData(): any {
    let result = this.http.get(`${this.apiUrl}/places`, this.httpOptions).pipe(
      map(response => {
        console.log(response['data']);
        response['data'];
      })
    );
    return result;
  }
}

test-dashboard.component.ts

constructor(private breakpointObserver: BreakpointObserver, private apiService: ApiService) {}

  getPlacesData() {
    this.apiService.getPlacesData().subscribe(
      (placesData: Observable<any>) => {
        console.log(placesData);
        this.placesData = placesData;
        console.log(this.placesData);
      },
      (error: string) => {
        console.log('Received an errror: ' + error);
      }
    );
  }

  ngOnInit() {
    this.getPlacesData();
  }
}

我希望第二个和第三个 console.log 具有与第一个相同的输出，但它们的输出是“未定义”而不是：

(15) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

【问题讨论】：

您需要确保在 map() 中实际返回响应，目前您没有隐式或显式返回任何内容。
您目前在地图函数中没有返回任何内容

标签： angular typescript angular-material

【解决方案1】：

问题是您试图同步返回一个值。 Angular https 请求是异步的。请这样对待他们。你的函数应该返回 Observable。在你的 html 模板中使用异步管道来访问之后的数据。

getPlacesData(): Observable<Places[]> {
    return this.http.get<Places[]>(`${this.apiUrl}/places`, this.httpOptions).pipe(
      map(response => response['data']),
    );
  }
}

【讨论】：

感谢您的回复，这是我的愚蠢错误，因为我把退货放在了错误的地方。我已经编辑了我的代码，使其看起来像您提供的代码，但现在它说它找不到名称“Places”。我需要先在任何地方定义它吗？我在网上读到它与导入有关，但我不知道要更改什么import { Injectable } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators';
我已通过将其更改为以下内容来解决此问题：`getPlacesData(): Observable`我的问题解决了。感谢大家的回复！
Places 将是您可以创建的接口/类。建议定义它，这就是我添加它的原因。任何人都应该避免。

【解决方案2】：

试试这样的

getPlacesData(): any {
return this.apiService.get(this.terminateSurveyUrl, terminateSurveyReqObj)
  .pipe(
    map((response:any) => {
      console.log('response',response);
      return response.data;
    }),
  )
}

希望对你有帮助！

【讨论】：

【解决方案3】：

您必须在 map 函数中返回数据

  map(response => {
    console.log(response['data']);
    return response['data'];
  })

或

  map(response => response['data'])

此外，在您的订阅类型中，值不再是 Observable，在您的情况下它将是 Array

(placesData: Array<any>)

【讨论】：