从JSON反应可观察到

提问者：小点点

从JSON反应可观察到

我正在学习Angular（版本8）并坚持使用RxJS。确切地说，我无法从可观察对象中读取特定的键。

这是我的用户界面：

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

然后在user. service.ts中，我有一个名为getUser（）的方法，它从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"
}
]
}

user. 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);
  }
}

可观察返回整个JSON响应。我正在尝试从组件中的此响应中读取用户数组。

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/组件/main/main.组件. ts（21,28）中的错误：错误TS2339：属性“数据”在类型“用户[]”上不存在。[有意义，因为它没有在用户界面中定义]

如果我将this. user=cards.data；更改为this.用户=卡片；，然后执行控制台.log，我可以从上面看到整个JSON响应。我正在尝试在我的UI上显示用户列表。

请指教。

共2个答案

匿名用户

您的getUser（）函数正在返回一个类型为“User”的数组，该类型没有“data”属性。这就是您收到错误的原因。

本质上，您的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。

匿名用户

如果要返回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);
  });