Question

component.html：

<div *ngIf="!isWaiting">
  <h2>LOGIN</h2>
  <p>{{ message | async }}</p>
  <div *ngIf="!(isLoggedIn | async)">
    <button (click)="login()">{{'StrLogin' | translate}}</button>
  </div>
  <div *ngIf="(isLoggedIn | async)">
    <button (click)="logout()">{{'StrLogout' | translate}}</button>
  </div>
</div>
<div *ngIf="isWaiting">
  <p>initializing</p>
</div>

component.ts

  message: Observable<string>;

  login(name : string, password : string): void {
    this.message = this.tokenService.login(name, password)
    .pipe(
      map((token) => {
        console.debug('login succeeded: %s', JSON.stringify(token));
        return 'success';
      }),
      catchError(err => {
        console.debug('login failed: %s', JSON.stringify(err));
        return 'failed';
      })
    );
  }

如果失败，则仅显示字母“ d”（表示“失败”）。如果我将其更改为：

      catchError(err => {
        console.debug('login failed: %s', JSON.stringify(err));
        return '123';
      })

它显示3。

Answer 1

catchError()运算符期望回调函数返回一个可观察值。我不确定为什么会呈现3，但很可能该字符串已转换为可观察的数组，该数组按顺序发出每个字符。

https://github.com/ReactiveX/rxjs/blob/master/src/internal/operators/catchError.ts#L90

      catchError(err => {
        console.debug('login failed: %s', JSON.stringify(err));
        return of('failed');
      })

https://www.learnrxjs.io/operators/error_handling/catch.html

在模板中使用async管道时。请记住，如果DOM被更高的*ngIf突变，它将调用 subscribe 。因此，如果可观察对象来自HTTP请求，则添加一个shareReplay(1)运算符，并且在模板中仅使用相同的对象引用。

为什么只显示Angular异步管道绑定中字符串的最后一个字符？

1 个答案: