使用Angular获取API调用typescript

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

用户页面.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

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

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