Javascript 如何获得对象数组而不是角度中的对象？

你能告诉我如何获得

对象数组

而不是angular 2中的

对象

吗？我正在打一个服务，得到一个

对象

作为响应

getUsers(): Observable<HttpResponse<UserModel>> {
    return this.http.get<HttpResponse<UserModel>>(this.configUrl).pipe(
      catchError(this.handleError)
    );
  }

目前我正在将整个对象发送到我的组件。现在我只想将数据数组发送到我的组件

目前我收到这样的

响应。数据

this.userDetail.getUsers().subscribe((response: any) => {
      console.log(response);
      this.users = response.data;
    },

但是我想插入
this.users=response

这是我的密码

我想操纵响应并将
数组
发送到组件
您必须从
getUsers
方法转换结果：

 getUsers(): Observable<UserModel[]> {
    return this.http.get<UserModelPage>(this.configUrl)
    .pipe(map(res => res.data), catchError(this.handleError));
  }

其中
UserModelPage
是这样的：

interface UserModelPage {
  data: UserModel[]
}

您可以使用运算符从原始响应中提取数据数组。请参见演示

型号：

export interface UserModelResponse {
  page: number;
  per_page: number;
  total: number;
  total_pages: number;
  data: Array<UserModel>
}

export interface UserModel {
  id: number;
  first_name: string;
  last_name: string;
  avatar: string;
}

getUsers(): Observable<Array<UserModel>> {
  return this.http.get<UserModelResponse>(this.configUrl).pipe(
    map(x => x.data),
    catchError(this.handleError)
  );
}

ngOnInit() {
  this.userDetail.getUsers().subscribe((response: Array<UserModel>) => {
    console.log(response);
    this.users = response;
  }, (error) => {
    console.log('error', error);
  }, () => {
    console.log('complete');
  });
}

导出接口UserModelResponse{
页码：编号；
每页：编号；
总数：个；
总页数：页数；
数据：数组
}
导出接口用户模型{
id：编号；
第一个名称：字符串；
姓氏：字符串；
化身：字符串；
}

服务：

export interface UserModelResponse {
  page: number;
  per_page: number;
  total: number;
  total_pages: number;
  data: Array<UserModel>
}

export interface UserModel {
  id: number;
  first_name: string;
  last_name: string;
  avatar: string;
}

getUsers(): Observable<Array<UserModel>> {
  return this.http.get<UserModelResponse>(this.configUrl).pipe(
    map(x => x.data),
    catchError(this.handleError)
  );
}

ngOnInit() {
  this.userDetail.getUsers().subscribe((response: Array<UserModel>) => {
    console.log(response);
    this.users = response;
  }, (error) => {
    console.log('error', error);
  }, () => {
    console.log('complete');
  });
}

getUsers（）：可观察{
返回此.http.get（this.configUrl）.pipe(
映射（x=>x.data），
catchError（this.handleError）
);
}

组件：

export interface UserModelResponse {
  page: number;
  per_page: number;
  total: number;
  total_pages: number;
  data: Array<UserModel>
}

export interface UserModel {
  id: number;
  first_name: string;
  last_name: string;
  avatar: string;
}

getUsers(): Observable<Array<UserModel>> {
  return this.http.get<UserModelResponse>(this.configUrl).pipe(
    map(x => x.data),
    catchError(this.handleError)
  );
}

ngOnInit() {
  this.userDetail.getUsers().subscribe((response: Array<UserModel>) => {
    console.log(response);
    this.users = response;
  }, (error) => {
    console.log('error', error);
  }, () => {
    console.log('complete');
  });
}

ngOnInit（）{
this.userDetail.getUsers（）.subscribe（（响应：数组）=>{
控制台日志（响应）；
这个用户=响应；
}，（错误）=>{
console.log（'error'，error）；
}, () => {
console.log（'complete'）；
});
}
以下内容将在您的用户详细信息.service.ts中更改

getUsers(): Observable<HttpResponse<UserModel>> {
    return this.http.get<HttpResponse<UserModel>>(this.configUrl).pipe( 
      map((res:any) => {
        return res.data;
        })
    );
  }

ngOnInit() {
    this.userDetail.getUsers().subscribe((response: any) => {
      console.log(response);
      this.users = response;
    }, (error) => {
      console.log('error', error);
    }, () => {
      console.log('complete');
    });
  }

我提供了一份工作代表，以备您可能需要