如何修复 Angular 中的 'Cannot set property userInfo$ of [object Object] which has only a getter' 错误

Question

我正在开发一个使用 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>

Answer 1

不需要订阅：

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。他们是异步的。

如何修复 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

angular

typescript

ngxs