如何修复 Angular 中的 'Cannot set property userInfo$ of [object Object] which has only a getter' 错误
How to fix 'Cannot set property userInfo$ of [object Object] which has only a getter' error in Angular
我正在开发一个使用 NGXS 的网络应用程序,想了解为什么我会收到此特定错误。我正在从 API 中获取数据,并希望将其显示在列中。在控制台日志中,我能够看到正确的数据,但无法显示数据。
这是一个网络应用程序,正在使用 Angular 和 NGXS 开发。我确实尝试避免订阅,只是在 HTML 中异步检索数据,但随后无法找到模型中定义的属性。我收到错误
Property 'name' does not exist on type 'UserInfo[]'.
Property 'email' does not exist on type 'UserInfo[]'.
@Select(UserLoginSate.getInfo) userInfo$: Observable<UserInfo[]>;
info = {};
constructor(private store: Store) {
}
ngOnInit() {
this.store.dispatch(new GetUserInfo()).subscribe(result => {
this.userInfo$ = result;
});
模型定义了两个属性:
export interface UserInfo{
name: string;
email: string;
}
我希望它显示用户信息(即姓名和电子邮件),但我收到错误 Cannot set property userInfo$ of [object Object] which has only a getter
。但是,可以在控制台日志中找到正确的数据。
编辑:
这是状态:
export class UserLoginStateModel{
info: UserInfo[];
}
@State<UserLoginStateModel>({
name: 'info',
defaults: {
userInfo: []
}
})
export class UserLoginState {
constructor(private userService: UserService) {}
@Selector()
static getInfo(state: UserLoginStateModel) {
return state.userInfo;
}
@Action(GetUserInfo)
getUserInfo({getState, setState}: StateContext<UserLoginStateModel>) {
return this.userService.fetchUserInfo().pipe(tap((result) => {
const state = getState();
setState({
...state,
userInfo: result,
});
}));
}
}
这是布局的一部分,我希望它会显示数据:
<nb-layout-column>
<div>
name: {{ userInfo$.name }}
<br/>
email: {{ userInfo$.email }}
</div>
</nb-layout-column>
不需要订阅:
ngOnInit() {
this.store.dispatch(new GetUserInfo())
}
如果您将 userInfo 设置为 null 会更好,这样如果用户未登录,则为 null。
@State<UserLoginStateModel>({
name: 'info',
defaults: {
userInfo: null
}
})
当您更改 @state
时,将 @Select(UserLoginSate.getInfo) userInfo$: Observable<UserInfo[]>;
更改为 @Select(UserLoginSate.getInfo) userInfo$: Observable<UserInfo>;
。
模板更改为:
<nb-layout-column>
<div *ngIf="userInfo$ | async as userInfo">
<p>name: {{ userInfo.name }}</p>
<p>email: {{ userInfo.email }}</p>
</div>
</nb-layout-column>
您不能显示没有 *ngIf
语句的 Observables 和 Promises。他们是异步的。
我正在开发一个使用 NGXS 的网络应用程序,想了解为什么我会收到此特定错误。我正在从 API 中获取数据,并希望将其显示在列中。在控制台日志中,我能够看到正确的数据,但无法显示数据。
这是一个网络应用程序,正在使用 Angular 和 NGXS 开发。我确实尝试避免订阅,只是在 HTML 中异步检索数据,但随后无法找到模型中定义的属性。我收到错误
Property 'name' does not exist on type 'UserInfo[]'.
Property 'email' does not exist on type 'UserInfo[]'.
@Select(UserLoginSate.getInfo) userInfo$: Observable<UserInfo[]>;
info = {};
constructor(private store: Store) {
}
ngOnInit() {
this.store.dispatch(new GetUserInfo()).subscribe(result => {
this.userInfo$ = result;
});
模型定义了两个属性:
export interface UserInfo{
name: string;
email: string;
}
我希望它显示用户信息(即姓名和电子邮件),但我收到错误 Cannot set property userInfo$ of [object Object] which has only a getter
。但是,可以在控制台日志中找到正确的数据。
编辑:
这是状态:
export class UserLoginStateModel{
info: UserInfo[];
}
@State<UserLoginStateModel>({
name: 'info',
defaults: {
userInfo: []
}
})
export class UserLoginState {
constructor(private userService: UserService) {}
@Selector()
static getInfo(state: UserLoginStateModel) {
return state.userInfo;
}
@Action(GetUserInfo)
getUserInfo({getState, setState}: StateContext<UserLoginStateModel>) {
return this.userService.fetchUserInfo().pipe(tap((result) => {
const state = getState();
setState({
...state,
userInfo: result,
});
}));
}
}
这是布局的一部分,我希望它会显示数据:
<nb-layout-column>
<div>
name: {{ userInfo$.name }}
<br/>
email: {{ userInfo$.email }}
</div>
</nb-layout-column>
不需要订阅:
ngOnInit() {
this.store.dispatch(new GetUserInfo())
}
如果您将 userInfo 设置为 null 会更好,这样如果用户未登录,则为 null。
@State<UserLoginStateModel>({
name: 'info',
defaults: {
userInfo: null
}
})
当您更改 @state
时,将 @Select(UserLoginSate.getInfo) userInfo$: Observable<UserInfo[]>;
更改为 @Select(UserLoginSate.getInfo) userInfo$: Observable<UserInfo>;
。
模板更改为:
<nb-layout-column>
<div *ngIf="userInfo$ | async as userInfo">
<p>name: {{ userInfo.name }}</p>
<p>email: {{ userInfo.email }}</p>
</div>
</nb-layout-column>
您不能显示没有 *ngIf
语句的 Observables 和 Promises。他们是异步的。