Question

是否可以告诉我如何以角度2获取array of objects而不是object。我正在点击服务并获得object作为回复。

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

得到回应

{
  "page": 1,
  "per_page": 3,
  "total": 12,
  "total_pages": 4,
  "data": [
    {
      "id": 1,
      "first_name": "George",
      "last_name": "Bluth",
      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"
    },
    {
      "id": 2,
      "first_name": "Janet",
      "last_name": "Weaver",
      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"
    },
    {
      "id": 3,
      "first_name": "Emma",
      "last_name": "Wong",
      "avatar": "https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg"
    }
  ]
}

目前我正在发送whole object to my component。现在我只想将data数组发送到我的组件。

目前我收到的是response.data。

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

但我想插入this.users=response

这是我的代码 https://stackblitz.com/edit/angular-4pkct8?file=src%2Fapp%2Fuserdetail.service.ts

我想操纵响应并将array发送到组件

Answer 1

您可以使用map运算符从原始响应中提取数据数组。有关演示，请参阅this stackblitz。

<强>模型：

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');
  });
}

Answer 2

您必须转换getUsers方法的结果：

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

map：

import { catchError, map } from 'rxjs/operators';

其中UserModelPage是这样的：

interface UserModelPage {
  data: UserModel[]
}

Answer 3

以下内容会在 user-detail.service.ts

中发生变化

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

以下内容会在 app.component.ts

中发生变化

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

我提供了一份工作代表here，以备不时之需。

如何在角度中获取对象数组而不是对象？

3 个答案: