Angular-HttpClient：将对象映射到数组属性答案

【问题标题】：Angular-HttpClient: Map object to array propertiesAngular-HttpClient：将对象映射到数组属性
【发布时间】：2018-12-14 17:09:33
【问题描述】：

我正在调用一个返回 JSON 对象的 API。我需要将此对象映射到一个数组。

以下是我的代码，但 API 调用后既没有收到任何响应也没有任何错误。

export class Features {
  MenuId: number;
  MenuName: string;
  Description: string;
  RoutePath: string;
}

featureList: Features[] = [];
 constructor(private http: HttpClient)

 getFeatureListByLoggedInUser(userID: number) { debugger;       
    return this.http.get(this.myAppUrl + "api/Employee/GetMenusByUID/" + userID)     
      .pipe(
      map(
        (data: any[]) => {
        debugger;
        this.featureList = data;
        //return true;
      }), catchError(error => {
        debugger;
        return throwError('Something went wrong!')
      })
    );
 }

也试过下面的代码，但它给了我一个错误：

类型对象不可分配给类型'any[]'

 featureList: Array<any> = [];

 getFeatureListByLoggedInUser(userID: number) { debugger;  
    return this.http.get(this.myAppUrl + "api/Employee/GetMenusByUID/" + userID)
      .subscribe(
        data => {
          debugger;
          this.featureList = data;            
      });
 }

编辑：

 return this.http.get<Array<Features>>(this.myAppUrl + "api/Employee/GetMenusByUID/" + userID)   
      .subscribe(
        data => {
          debugger;
          //this.featureList = data;  
      });

【问题讨论】：

标签： angular rxjs angular6 angular-httpclient rxjs6

【解决方案1】：

你不是从.map()返回的。你应该从服务返回this.featureList

getFeatureListByLoggedInUser(userID: number) { debugger;       
    return this.http.get(this.myAppUrl + "api/Employee/GetMenusByUID/" + userID)     
      .pipe(
      map(
        (data: any[]) => {
        debugger;
       return this.featureList = data;
      }), catchError(error => {
        debugger;
        return throwError('Something went wrong!')
      })
    );
 }

编辑

map 在您的代码中似乎也没有必要，因为您没有在里面操作任何东西。您可以取消它并保留catchError 以处理错误。

getFeatureListByLoggedInUser(userID: number) {       
    return this.http.get(this.myAppUrl + "api/Employee/GetMenusByUID/" + userID)     
      .pipe(
           catchError(error => {
            return throwError('Something went wrong!')
      })
    );
 }

在你的组件中

this.service.getFeatureListByLoggedInUser(id)
      .subscribe(data => { this.featureList = data })

【讨论】：

http.get() 返回什么。它是否返回任何数据？你能检查一下网络标签吗？
不调用 api，但第二个代码提到了它的调用 api 并返回具有相同 api url 的 json..
是否应该在 httpclient 上进行 http 调用，以防映射对象？
@SunilKumar 只需删除您服务的这个 featureList 属性。这是无用和错误的。并删除那个不正确的 map()，如果它正确，也不会做任何有用的事情。还有那个catchError，它将现有的错误隐藏在另一个没有说任何有用的错误之后。为元素的实际类型定义一个类型，而不是使用 any。那么你只需要：return this.http.get<Array<TheActualTypeOfTheElements>>(this.myAppUrl + "api/Employee/GetMenusByUID/" + userID);
你应该在你的组件内部订阅而不是this.service.getFeatureListByLoggedInUser(id).subscribe(data => { this.featureList = data })