Angular 中的 HTTP 获取请求

编程问答 2022-04-30

问题描述

我有这个 url=https://reqres.in/api/users?page=2 并且我正在使用 get 请求来获取数据。

user.ts 是一个接口

export interface User {
    id:number,email:string,first_name:string,last_name:string,avatar:string
}

user.service.ts 是一个服务

getAllUsers() :  Observable<User[]> {
  return this.http.get<User[]>("https://reqres.in/api/users?page=2");    
}

user.component.ts

import { Component,OnInit } from '@angular/core';
import { UserService } from '../user.service';

@Component({
  selector: 'app-user',templateUrl: './user.component.html',styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {

  constructor(private userService: UserService) { }

  public user =[];

  ngOnInit(): void {
    this.userService.getAllUsers().subscribe(data => this.user = data)
  }

}

我想从'GET'请求的响应对象中获取数据对象并创建一个用户数组。

Error: src/app/user/user.component.ts:16:54 - error TS2322: Type 'User[]' is not assignable to type 'never[]'.

16     this.userService.getAllUsers().subscribe(data => this.user = data)
                                                        ~~~~~~~~~


Error: src/app/user/user.component.ts:16:54 - error TS2322: Type 'User[]' is not assignable to type 'never[]'.
  Type 'User' is not assignable to type 'never'.

16     this.userService.getAllUsers().subscribe(data => this.user = data)

解决方法

您实际上需要创建一个临时对象来访问用户[] - 这就是您遇到该类型错误的原因。您可以通过使用管道并将对象内部所需的数据传递回组件来解决此问题。

如果您需要进一步的帮助，请告诉我。

Stackblitz

,

如何更改组件中的用户类型：

import { Component,OnInit } from '@angular/core';
import { UserService } from '../user.service';

@Component({
  selector: 'app-user',templateUrl: './user.component.html',styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {

  constructor(private userService: UserService) { }

  public users: User [] =[];

  ngOnInit(): void {
    this.userService
      .getAllUsers()
     .subscribe(data => this.user = data)
  }

}
angularangulargethttphttp