Question

我正在使用NGXS更新加载状态，并且状态正在正确更新，但是我面临的一个问题是

如何在模板的多个位置使用加载状态？

NGXS选择器如下所示：

>>> A = B = []
>>> C = A
>>> C.append(0)
>>> A
[0]
>>> B
[0]
>>> C
[0]
>>> B.append(1)
>>> A
[0, 1]
>>> B
[0, 1]
>>> C
[0, 1]

现在我的模板中有一个需要禁用的按钮，并且在分派操作时应在按钮中显示加载程序。我尝试如下，但没有用。按钮没有被禁用。

@Select(MyAppState.isLoadingLayouts) loading$: Observable<boolean>;

我认为我们不能在模板中多次使用<button mat-raised-button class="gec-button" (click)="getLayoutsData()" [disabled]="loading"> <ng-container *ngIf="loading$ | async as loading; else submit"> <app-progress-bar [diameter]="16"></app-progress-bar> </ng-container> <ng-template #submit>Submit</ng-template> </button>，因为它会触发多个异步调用。

有没有一种方法可以实现单个异步管道？

Answer 1

好的。您只需要share在订阅者之间可观察到：

public getSharedLoading$() {
  return this.loadging$.pipe(share());
}

*ngIf="getSharedLoading$ | async as loading; else submit"

Answer 2

是的，如果您在多个地方使用异步管道，则会多次触发请求。

要解决此问题，请尝试以下任何一种方法：

1）将其订阅到组件中，并使用带有空检查的属性

2）使用ng-container

欢呼（y）

在同一可观察对象上多次使用`async`管道

2 个答案: