基于服务返回 observable 的加载指示器

Question

这可能是一个蹩脚的问题，但我是 angular 的新手，我对这些可观察量知之甚少。

我得到一些代码，其中第二个 select 的选项取决于第一个 select 值。有一个 refreshPeople() 方法在第一次 select 更改时调用，此方法尝试将加载设置为 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

Answer 1

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

Stackblitz Demo

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

您无法等待可观察的执行。只有承诺。 Observables 是建立在 promises 之上的一层，用于扩展其功能并添加更多特性。
Observable 只有在你调用 subscribe 之后才会执行，而你并没有这样做。

我强烈建议您抽出时间复习一下 RxJs 的基础知识，这样您就不会遇到概念上的问题。当我开始使用 angular 时，我犯了一个错误，没有这样做。

编辑：

await this.dataService.getPeopleByGender(this.gender);

这里 await 基本上什么都不做，因为你的方法 returns 和 observable，它不订阅它，所以操作不是异步的。

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

基于服务返回 observable 的加载指示器

loading indicator based on service returning observable

angular

angular2-observables