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

Question

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

组件：

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 和 public 上：https://github.com/djangojazz/AngularMaterial。您只需运行 Visual Studio 中的 API 然后使用 'npm run start'.

启动 Angular 客户端

Answer 1

我建议使用 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>

Answer 2

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

如果您的 entry$ 和 entry 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

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

Mat-Spinner with async is not finishing as I expect it to with rxjs function in Angular 12

rxjs

angular-material

angular

angular12