Observable Angular 8 中的对象用户

Question

我创建了一个服务并尝试调用 API 方法 (HTTP GET) 并将我的数据放在 Observable 中，我不明白为什么我没有看到来自 API GET 的所有数据（对象）。

angular-component.ts

public allUsers$: Observable<User[]>;
constructor(private usersService: UsersService) { }
ngOnInit() {
   this.allUsers$ = this.getAllUsers();
   console.log(this.allUsers$) 
}
private getAllUsers(): Observable<User[]> {
   return this.usersService.getUsers(); 
}

在控制台我有这个消息：

users.service.ts

public getUsers(): Observable<User[]> {
  return this.apiService.get(this.type) as Observable<User[]>;
}

api.service.ts

public get(url: string): Observable<any> {
   return this.http.get(environment.apiUrl + `/${url}`);
}

nodejs-route.js

app.get("/", async (req, res) => {
  const getAllUsers = await User.find().populate("orders.order_id");
  res.status(200).send(getAllUsers);
});

Answer 1

始终牢记 Observable 什么都不做。

作为首席 RxJS 开发人员 Ben Lesh 曾经说过：

Observables 本身是有活力的。他们不流任何东西或做 任何事物。它们是流/动作/观察的模板， 将在订阅中设置。

还有两种基本的订阅方式：

1. 使用异步管道。
2. 使用subscribe 方法。

模板中的异步管道会自动为您订阅和取消订阅。

所以在你的模板中，你会有这样的东西：

<div class="card"
     *ngIf="allUsers$ | async as users">

然后您将能够在您的模板中访问users，例如在*ngFor 中。

但是，使用异步管道会使访问组件代码中的数据变得更加困难。所以你不能仅仅为了查看数据而这样做：

console.log(this.allUsers$) 

如您所见，所有将提供给您的是有关 Observable 的信息。

---

另一种选择是订阅您的组件：

sub: Subscription
users: User[]

ngOnInit() {
   this.sub = this.getAllUsers().subscribe(
    users => {
       this.users = users;
       console.log(users);
    );
}

subscribe() 方法返回一个订阅，然后您可以使用该订阅手动取消订阅。

然后，您将拥有一组用户 User[]，而不是 Observable<User[]> 作为您的组件属性。然后您的模板可以绑定到该数组。

第一种技术（异步管道）通常是推荐的方法。