Question

我正在使用NGXS开发一个Web应用程序，并且想了解为什么我遇到此特定错误。我正在从API提取数据，并希望将其显示在列上。在控制台日志中，我可以看到正确的数据，但无法显示数据。

这是针对使用Angular和NGXS开发的Web应用程序。我确实尝试避免订阅，而只是在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

如果没有tkinter.Message语句，则无法显示Observables和Promises。 Thay是异步的。

如何修复Angular中的“无法设置仅具有吸气剂的[object Object]的属性userInfo $”错误

1 个答案: