使用 Angular 获取 API 调用打字稿

Question

我在调用我的 API 数据时遇到了问题。当我将函数初始化为 ngOnit() 时。我无法显示任何数据。

user.service.ts

  getUser(id): Observable<User[]> {
    return this.http.get<User[]>('http://localhost:8000/api/users/' + id)
      .pipe(
        tap(_ => console.log(`User fetched: ${id}`)),
        catchError(this.handleError<User[]>(`Get user id=${id}`))
      );
  }

user.page.ts

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

@Component({
  selector: 'app-users',
  templateUrl: './users.page.html',
  styleUrls: ['./users.page.scss'],
})
export class UsersPage implements OnInit {

  constructor(private userService: UsersService) { }

  ngOnInit() {
    this.userService.getUserList()
  }
}

Answer 1

您的服务 returns 是一个可观察的，您需要在 ngOnInit 函数中订阅它。将结果分配给 public 变量并在 HTML 中使用它来显示数据。

public users: User[] = [];
ngOnInit () {
   this.userService.getUserList().subscribe ( users => {
       this.users = users;
       console.log ( this.users);
   });
}

使用 Angular 获取 API 调用打字稿

Get API call typescript with Angular

api

rest

typescript

ionic4

angular8