带有异步的 Mat-Spinner 没有像我期望的那样在 Angular 12 中使用 rxjs 函数完成

如何解决带有异步的 Mat-Spinner 没有像我期望的那样在 Angular 12 中使用 rxjs 函数完成

我几乎是 rxjs 的菜鸟，可能只是完全使用了错误的函数。本质上，我正在做一堆 .NET Core 3.1 后端并模拟两秒钟的延迟。我使用相同的服务调用两次来模拟类似于我在生产代码上所做的事情。所以我的代码即使是连接起来在概念上也非常相似。当两个服务调用完成时，我想要一个微调器停止。我希望它们同时启动，但我不在乎它们是可观察的还是实际的项目并同时进行调用。无论我尝试过什么，我都会看到微调器保持打开状态，并且“假”设置的上下文不断发生。

组件：

import { Component,OnInit } from '@angular/core';
import { combineLatest,Observable,of } from 'rxjs';
import { Entry } from '../Models/entry.model';
import { TestService } from '../test.service';

@Component({
  selector: 'app-Entry',templateUrl: './Entry.component.html',styleUrls: ['./Entry.component.scss']
})
export class EntryComponent implements OnInit {
  entry$: Observable<Entry> = this.service.getItem();
  entry2$: Observable<Entry> = this.service.getItem();
  loading$: Observable<boolean> = of(true);

  constructor(private readonly service: TestService) { }

  ngOnInit() {
    //my guess is this part is completely wrong for what I am trying to accomplish.
    combineLatest([this.entry$,this.entry2$]).pipe(x => this.loading$ = of(false));
  }

}

查看：

<mat-spinner [hidden]="loading$ | async"></mat-spinner>
<p>
  <em>{{entry$ | async | json}}</em>
</p>
<p>
  <em>{{entry2$ | async | json}}</em>
</p>

整个项目都在 GitHub 上并公开：https://github.com/djangojazz/AngularMaterial。您只需在 Visual Studio 中运行 API，然后使用“npm run start”启动 Angular 客户端。

解决方法

我建议使用 BehaviorSubject 和 finalize 运算符来正确处理您的 loading$ 变量。这是更改后的代码。

component.ts：

...

@Component({
  selector: 'app-Entry',templateUrl: './Entry.component.html',styleUrls: ['./Entry.component.scss']
})
export class EntryComponent implements OnInit {
  entry$: Observable<Entry> = this.service.getItem();
  entry2$: Observable<Entry> = this.service.getItem();
  loading$ = new BehaviorSubject<boolean>(true);

  constructor(private readonly service: TestService) { 
    combineLatest([this.entry$,this.entry2$]).pipe(finalize( ()=> this.loading$.next(false) ).subscribe();
}

  ngOnInit() {}

}

html：

<mat-spinner *ngIf="loading$ | async"></mat-spinner>
<p>
  <em>{{entry$ | async | json}}</em>
</p>
<p>
  <em>{{entry2$ | async | json}}</em>
</p>

,

您离 combineLatest 不远了，但您并没有订阅它。

如果您的 entry$ 和 entry$2 observables 是 1-off observables，那么这种方法可能更简单：

  entry$: Observable<any> = of('entry$').pipe(delay(500));
  entry2$: Observable<any> = of('entry2$').pipe(delay(5000));

  combined$;
  constructor() {}

  ngOnInit() {
    this.combined$ = combineLatest([this.entry$,this.entry2$]);
  }

<div *ngIf="combined$ | async as combined; else loading">
  Data loaded
  {{combined[0]}}
  {{combined[1]}}
</div>
<ng-template #loading>
  <mat-spinner></mat-spinner>
</ng-template>

Stackblitz

但是如果他们不断地发出一个值，那么你可能想要订阅它，因为你想在每次发出新值时显示 lolading 按钮

此外，显示加载指示器通常是一种副作用，当提到副作用时，您应该使用 tap 运算符。

  ngOnInit() {
    combineLatest([this.entry$,this.entry2$])
      .pipe(
        tap(() => this.loading$.next(true)),takeUntil(this.destroy$)
      )
      .subscribe(res => {
        console.log(res);
        this.data1 = res[0];
        this.data2 = res[1];
        this.loading$.next(false);
      });
  }

Stackblitz