angular - 如何在等待可观察对象从 Angular 中的服务获取数据时显示加载微调器

Question

我已经设置了一个 observable 服务来帮助我保留数据，但是我需要一种方法来在数据等待来自 observable 时显示加载微调器。

我的服务:

imports [...]

import { Observable, BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class OrganisationsService {
  private organisations$ = new BehaviorSubject<Organisation[]>([
    {
      [...]
    }
  ]);

  constructor(private http: HttpClient) {
    this.http
      .get(
        environment.apicall
      )
      .subscribe((data) => this.organisations$.next(data['organisations']));
  }

  getList(): Observable<Organisation[]> {
    return this.organisations$.asObservable();
  }

这是我的组件:

    imports ...

    import UIkit from 'uikit';
    import { Observable } from 'rxjs';

    @Component({
      selector: 'app-organisationlist',
      templateUrl: './organisationlist.component.html',
      styleUrls: ['./organisationlist.component.css']
    })
    export class OrganisationlistComponent implements OnInit {

      public loading = true;

      public organisations$: Observable<Organisation[]>;

      constructor(public organisationsService: OrganisationsService) {}

      ngOnInit() {
        this.getData().then(() => {
          this.loading = false;
        });
      }

      async getData() {
        this.organisations$ = this.organisationsService.getList();
      }
}

这是我的布局(使用 Uikit):

  <div *ngIf="loading" uk-spinner></div>
  <div>
    <ul class="uk-list">
      <li *ngFor="let organisation of organisations$ | async">
        {{ organisation.name }}
      </li>
    </ul>
  </div>

显然， getData函数虽然声明为 async，但实际上并不是 async 并立即返回。所以 this.loading是 'false' OnInit，因此它不显示。

有很多答案表明当订阅发生在组件中时这可能如何工作，但是因为这是服务中的共享数据，我找不到在设置之前等待数据的方法 this.loading为假。

非常感谢。

Answer 1

谢谢大家的回答，但这些建议都没有达到问题中概述的目的，但我确实研究了一个解决方案并最终得到了一个解决方案。开始了:

在服务中，我创建了一个名为 loading$ 的新 Observable并将其设置为 new BehaviorSubject<boolean>(true);
然后我创建了一个 setter/getter :
getLoading(): Observable<boolean> {
return this.loading$;
}
然后我用 true 包裹了 HTTP 调用。然后将加载设置为 false在订阅的第三个参数中(onCompleted 函数)。

所以服务看起来像这样:

import { Observable, BehaviorSubject, of } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class OrganisationsService {
  private organisations$ = new BehaviorSubject<Organisation[]>([
    {
      [...]
    }
  ]);

  //initiate the new Loading variable via BehaviorSubject and set it to "true" from the beginning.
  public loading$ = new BehaviorSubject<boolean>(true);

  constructor(private http: HttpClient) {

    //set the loading$ to true again just before we start the HTTP call
    this.loading$.next(true);


    this.http
      .get(environment.apicall)
      .subscribe(

        //onNext method, where we get the data
        (data) => this.organisations$.next(data['organisations']),

        //onError method (Blank for now)
        () => {},

        //onComplated method, now that we have the data we can set the loading to false
        () => {
          this.loading$.next(false);
        }
      );
  }

  getLoading(): Observable<boolean> {
    return this.loading$;
  }

  getList(): Observable<Organisation[]> {
    return this.organisations$;
  }

请注意，在 HTTP 调用的 subscribe 方法中，我添加了一个空白的第二个方法(这是用于 onError)，然后在第三个方法中，我添加了一个将加载设置为 false 的函数: this.loading$.next(false); .这意味着当订阅完成时 Loading 现在将为 false。

然后在我的组件中，我得到 loading$订阅:

      public loading$: Observable<boolean>;
      public organisations$: Observable<Organisation[]>;

      constructor(public organisationsService: OrganisationsService) {}

      ngOnInit() {
        this.getData();
      }

      async getData() {

        //initially loading$ will be true because the service makes it so
        this.loading$ = this.organisationsService.getLoading();

        //when this completes, loading$ will be set to false via the service
        this.organisations$ = this.organisationsService.getList();
      }

在我看来:

  <div>
    <div uk-spinner *ngIf="loading$ | async"></div>
    <ul class="uk-list">
      <li *ngFor="let organisation of organisations$ | async">
        {{ organisation.name }}
      </li>
    </ul>
  </div>