Почему отображается только последний символ строки в привязке углового асинхронного канала?

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» (из «fail»).Если я изменю его на:

      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 выше.Таким образом, если наблюдаемое получено из HTTP-запроса, добавьте оператор shareReplay(1) и используйте только ту же ссылку на объект в шаблоне.