Ошибка при отправке наблюдаемого пользователя из компонента приложения (asyn c -pipe)

Question

Вот мой файл App.component.ts, из которого я отправляю «user», наблюдаемый в компонент «header» в качестве входных данных.

import { Component, OnDestroy, OnInit } from '@angular/core';
import { AuthService } from '../../core/auth/auth.service';
import { User } from '../../core/models/User';
import { Subscription, Observable, BehaviorSubject } from 'rxjs';
import { Router } from '@angular/router';

@Component({
  selector: 'trisha-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnDestroy, OnInit {
  user: Observable<User>;
  userSubscription: Subscription;

  constructor(
    private authService: AuthService,
    private router: Router
  ) { }
  ngOnInit(): void {
    this.user = this.authService.user;
    this.userSubscription = this.authService.findme().subscribe(user => {
      this.user = user;
    });
  }

  logout() {
    this.authService.logout();
    this.router.navigate(['/']);
  }

  ngOnDestroy(): void {
    if (this.userSubscription) {
      this.userSubscription.unsubscribe();
    }
  }
}

---

Ниже приведен App.component. html file

<trishapp-header [user]="user | async" (logoutEvent)="logout()"></trishapp-header>
<router-outlet></router-outlet>

---

Ниже приведен мой файл header.component.ts

import { Component, OnInit, Input, EventEmitter, Output, ChangeDetectionStrategy } from '@angular/core';
import { User } from 'src/app/core/models/User';

@Component({
  selector: 'trishapp-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class HeaderComponent implements OnInit {

  @Input() user: User;
  @Output() logoutEvent = new EventEmitter<any>();
  constructor() { }

  ngOnInit(): void {
  }
  logout() {
    this.logoutEvent.emit();
  }
}

---

Проблема в том, что я правильно получаю значение в своем компоненте заголовка, но возможно, из-за следующей ошибки мое приложение не работает должным образом

ERROR Error: InvalidPipeArgument: '[object Object]' for pipe 'AsyncPipe'

Пожалуйста, помогите мне, я не могу найти ничего плохого в моем App.component.ts, поскольку «пользователь» уже является наблюдаемым

Answer 1

• this.user = this.authService.user;, сначала вы указываете, что свойство класса user вашего компонента является наблюдаемым в вашем сервисе, и вы вправе использовать канал async для получения последнего испускаемое значение;

• затем, this.user = user;, вы указываете, что свойство класса user вашего компонента - это последнее испущенное значение authService.findMe() Observable, поэтому установленное значение уже решен, и вы не можете использовать async канал на нем.

    ngOnInit(): void {
        this.user = this.authService.user;
        this.userSubscription = this.authService.findme().subscribe(user => {
          this.user = user;
        });
      }