Angular - 在 | 的结果之前显示默认值异步

Question

我如何显示-直到$futureCredit的结果返回？

    <span [innerText]="'-'">
      {{ futureCredit$ | async | currency:'EUR'}}
    </span>

我尝试使用 innerText 但异步的结果不会覆盖- 。

Answer 1

这应该有效。

<span>
  {{ (futureCredit$ | async | currency:'EUR') || '-'}}
</span>

Answer 2

你也可以使用 ngIf else 指令。

<span *ngIf="futureCredit$ | async as credit; else default">
 {{ credit  | currency:'EUR' }}
</span>  
<ng-template #default>
<span> - <span>
</ng-template>

它适用于这种情况，但如果 futureCredit 会返回一个错误的值，它仍然会呈现 else 情况。

在这种情况下，我将使用自定义 rxjs 管道：

// invokes a callback upon subscription
export function prepare<T>(
  callback: () => void,
): (source: Observable<T>) => Observable<T> {
  return (source: Observable<T>): Observable<T> =>
    defer(() => {
      callback();
      return source;
    });
}

你可以像这样使用：

--------------------------TS---------- --------

startFutureVal$ = new Subject<boolean>();
futureVal$.pipe(prepare(() => startFutureVal$.next(true))
                   ,tap(() => startFutureVal$.next(false)))

---------------------------HTML---------- -----

<span *ngIf="futureVal$ | async as val"> val </span>
<span *ngIf="startFutureVal$ | async">
  -
</span>

当然，这对于您的用例来说有点矫枉过正。

Answer 3

据我了解，LeKeque 评论第一部分中提供的解决方案足以解决所述问题。 我已经通过这个解决方案解决了类似的问题。

LeKeque的解决方案：

<span *ngIf="futureCredit$ | async as credit; else default">
 {{ credit  | currency:'EUR' }}
</span>  
<ng-template #default>
<span> - <span>
</ng-template>