Question

我正在学习Angular（版本8），并被RxJS所困扰。确切地说，我无法从Observable读取特定的键。

这是我的用户界面：

export interface User {
  id: Number;
  email: String;
  first_name: String;
  last_name: String;
  avatar: String;
}

然后在 users.service.ts 中，我有一个名为getUsers()的方法，该方法从API调用（https://reqres.in/api/users）接收数据。响应JSON如下所示：

{
page: 1,
per_page: 6,
total: 12,
total_pages: 2,
data: [
{
id: 1,
email: "george.bluth@reqres.in",
first_name: "George",
last_name: "Bluth",
avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg"
},
{
id: 2,
email: "janet.weaver@reqres.in",
first_name: "Janet",
last_name: "Weaver",
avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg"
},
{
id: 3,
email: "emma.wong@reqres.in",
first_name: "Emma",
last_name: "Wong",
avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg"
},
{
id: 4,
email: "eve.holt@reqres.in",
first_name: "Eve",
last_name: "Holt",
avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg"
},
{
id: 5,
email: "charles.morris@reqres.in",
first_name: "Charles",
last_name: "Morris",
avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg"
},
{
id: 6,
email: "tracey.ramos@reqres.in",
first_name: "Tracey",
last_name: "Ramos",
avatar: "https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg"
}
]
}

users.service.ts 文件如下所示：

import { Injectable } from "@angular/core";
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Observable } from "rxjs";

import { User } from "../models/user";

const httpOptions = {
  headers: new HttpHeaders({ "Content-Type": "applicaiton/json" })
};

@Injectable({
  providedIn: "root"
})
export class UsersService {
  private getUsersUrl: string = "https://reqres.in/api/users";
  constructor(private http: HttpClient) {}

  // We have casted the observable into an array of type User
  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.getUsersUrl);
  }
}

Observable返回整个JSON响应。我正在尝试从组件中的此响应读取users数组。

ngOnInit() {
    this.loaded = false;
    setTimeout(() => {
      this.usersService.getUsers().subscribe(cards => {
        // How do I read the "data" key in cards?
        this.users = cards.data; /* Error */
        this.loaded = true;
        console.log(this.users);
      });
    }, 2000);
  }

出现以下错误：

src / app / components / main / main.component.ts（21,28）中的错误：错误TS2339：类型'User []'中不存在属性'data'。 [有道理，因为它没有在用户界面中定义]

如果我将this.users = cards.data;更改为this.users = cards;，然后执行console.log，则会从上方看到整个JSON响应。我试图在用户界面上显示用户列表。

请告知。

Answer 1

您的getUsers（）函数返回一个类型为“用户”的数组，该类型不具有“数据”的属性。这就是为什么您得到错误。

基本上，您的json结构与您要使用的类型的结构不匹配。

要解决这一问题，可以创建一个新类型，例如：

export interface Page {
  page: number,
  per_page: number,
  total: number,
  total_pages: number,
  data: User[]
}

然后从您的服务中退回该款项：

 getUsers(): Observable<User[]> {
    return this.http.get<Page>(this.getUsersUrl);
  }

现在您应该可以访问您的订阅中的cards.data。

Answer 2

如果要返回可观察的User []，则可以使用map运算符返回数据：

getUsers(): Observable<User[]> {
  return this.http.get(this.getUsersUrl).pipe(map((result:any)=>result.data));
}

并订阅可观察的内容，例如：

this.usersService.getUsers().subscribe(users=> {
    this.users = users;
    this.loaded = true;
    console.log(this.users);
  });

从JSON响应可观察到

2 个答案: