错误 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)"
错误:
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)"