1

我几乎是 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 客户端。

4

2 回答 2

1

我建议使用BehaviorSubjectandfinalize运算符来正确处理您的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>
于 2021-05-23T21:17:03.660 回答
1

您与 the 相距不远，combineLatest但您没有订阅它。

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

堆栈闪电战

但是，如果他们不断发出一个值，那么您可能想要订阅它，因为您希望每次发出新值时都显示 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);
      });
  }

堆栈闪电战

于 2021-05-23T21:32:13.467 回答