在 Angular (INPUT) 中將異步數據從父級傳遞給子級

Question

用戶組件.ts

 user:User;

  constructor(private authService:AuthService) {}

  ngOnInit(): void {
    this.authService.user.subscribe((userVal) => {
      this.user = userVal;
      console.log(this.user);
    });
  }

用戶組件.html

<div class="container mt-3 ">
    <app-user-detail [userData]="user"></app-user-detail>
</div>

User.detail.component.ts

export class UserDetailComponent implements OnChanges {
  @Input() userData: User;

  constructor() {}

  ngOnChanges() {
    console.log(this.userData)
  }

}

在 User.component.ts 中獲取“this.user”的值但在 User.detail.component.ts 中未定義

這是為什么？

Answer 1

試試這個：

[userData]="user | async"

如果單獨不起作用，請添加以下更改：

get user(){
return this.authService.user;
}

constructor(private authService:AuthService) {}

  ngOnInit(): void {
}

<div class="container mt-3 ">
    <app-user-detail [userData]="user | async"></app-user-detail>
</div>