Angular 基于可观察服务返回的加载指示器

这可能是一个蹩脚的问题，但我对角度不太熟悉，我对这些可观测的东西不太了解

我得到了一些代码，其中第二次选择的选项取决于第一次选择的值。有一个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}}

Gender:{{Gender}


正在加载的人员：{{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;
  }

people$：可见；
性别=‘男性’；
加载=真；
性别=[‘男性’、‘女性’]；
构造函数（专用数据服务：数据服务）{
}
恩戈尼尼特（）{
this.people$=this.dataService.getPeopleByGender（this.gender）；
这一点：加载=错误；
}
async refreshPeople（）：任意{
这是。加载=真；
this.people$=等待this.dataService.getPeopleByGender（this.gender）；
这一点：加载=错误；
}

以及服务方法：

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

getPeopleByGender（性别：string='male'）：可观察{
让items=getMockPeople（）；
items=items.filter（x=>x.gender==gender）；
归还（项目）。管道（延迟（2000年））；
}

演示在这里：

---

我已经更改了你在stackblitz上的代码，使其按预期工作

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

你不能等待可观察的执行。只有承诺。可观察是在承诺之上构建的一个层，用于扩展其功能并添加更多功能

只有在调用subscribe之后，才执行可观察对象，而您没有这样做

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

编辑：

这里wait基本上什么都不做，因为您的方法返回并可观察，它不订阅它，所以操作不是异步的

在模板中使用异步管道订阅obervable，但它不允许您在obervable完成执行时侦听

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