基于服务返回的可观察负载指标

问题描述

这可能是一个me脚的问题，但是我是新手，对这些可观测值我不太了解。

我得到了一些代码，其中第二选择的选项取决于第一选择的值。有一个refreshPeople（）方法，该方法在第一次选择更改时被调用，该方法试图将加载设置为true，然后异步调用数据，然后将加载设置为false。

但是refreshPeople（）中的最后一条命令没有等待异步调用结束。 ：（

在angular2 +中制作这类东西的正确方法是什么？

所以模板是：

Gender: {{gender}}

<ng-select 
  [items]="genders" 
  (change)="refreshPeople()" 
  [(ngModel)]="gender"
  >
</ng-select>

<br/>

<ng-select 
  [items]="people$ | async" 
  bindLabel="name" 
  [loading]="loading" 
  bindValue="id"
  >
</ng-select>

People loading: {{loading}}

组件代码：

  people$: Observable<Person[]>;
  gender = 'male';
  loading = true;
  genders = ['male','female'];

  constructor(private dataService: DataService) {
  }

  ngOnInit() {
    this.people$ = this.dataService.getPeopleByGender(this.gender);
    this.loading = false;
  }

  async refreshPeople(): any {
      this.loading = true;
      this.people$ = await this.dataService.getPeopleByGender(this.gender);
      this.loading = false;
  }

以及服务方法：

  getPeopleByGender(gender: string = 'male'): Observable<Person[]> {
    let items = getMockPeople();
    items = items.filter(x => x.gender === gender);
    return of(items).pipe(delay(2000));
  }

演示在这里：

https://stackblitz.com/edit/async-select-options-with-filter?file=null

解决方法

我在stackblitz上更改了您的代码，因此它可以按预期工作。

Stackblitz Demo

您的代码有两个主要问题：

1. 您无法等待可见的执行。只有诺言。可观察对象是在promise的基础上构建的一层，用于扩展其功能并添加更多功能。
2. 可观察对象仅在您调用订阅后才执行，而您没有执行。

我强烈建议您花些时间了解RxJ的基础知识，以免遇到概念上的问题。当我不这样做而开始使用angular时，我犯了一个错误。

编辑：

pop

在这里，等待基本上不执行任何操作，因为您的方法返回并且是可观察的，它没有订阅它，因此该操作不是异步的。

在模板中使用异步管道可以订阅可观察对象，但是它不允许您在执行完成时进行监听。