错误 TS2322:类型 'PropUser | null' 不可分配给类型 'PropUser'

error TS2322: Type 'PropUser | null' is not assignable to type 'PropUser'

错误:

Error: src/app/user/containers/shell-user-profile/shell-user-profile.component.html:1:20 - error TS2322: Type 'PropUser | null' is not assignable to type 'PropUser'.
      Type 'null' is not assignable to type 'PropUser'.
    
    1 <app-user-profile [userProfile]="(userProfile$|async)"></app-user-profile>

ts 文件:

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { actionGetProfile } from "./../../store/actions";
import { selectProfile } from "./../../store/selectors";
import { select, Store } from "@ngrx/store";
import { PropUser } from '../../store/reducer';
import { Observable, pipe } from 'rxjs';
import { map } from "rxjs/operators";

@Component({
  selector: 'app-shell-user-profile',
  templateUrl: './shell-user-profile.component.html',
  styleUrls: ['./shell-user-profile.component.scss']
})
export class ShellUserProfileComponent implements OnInit {

  @Output() userProfile$: Observable<PropUser> = new EventEmitter();

  constructor(private readonly store: Store) { }

  ngOnInit(): void {
    this.store.dispatch(actionGetProfile());
    this.userProfile$ = this.store.select(selectProfile).pipe(map((data: PropUser) => data));
  }

}

html :

<app-user-profile [userProfile]="{{userProfile$|async}}"></app-user-profile>

我在这里错过了什么?有人帮帮我吗?

Child ts:

import { Component, Input, OnInit } from '@angular/core';
import { PropUser } from '../../store/reducer';

@Component({
  selector: 'app-user-profile',
  templateUrl: './user-profile.component.html',
  styleUrls: ['./user-profile.component.scss']
})
export class UserProfileComponent implements OnInit {

  @Input() userProfile: PropUser;

  constructor() {
    this.userProfile = { userId: 0, id: 0, title: "", body: "" }
  }

  ngOnInit(): void {
  }

}

html:

<p>{{userProfile.userId}}</p>

async 管道 return 签名类似于 <T>(input$: Observable<T>): T | null。因为它在等待异步调用的响应时 return 对模板来说是空的。

您有多种选择来解决问题:

[userProfile]="(userProfile$|async)!"

或者像这样使用$any

 [userProfile]="$any(userProfile$|async)"