如何获得ngrx商店的特定对象？

Question

现在，我的商店是一个对象，里面有一个users数组的对象：

{ "users": [ { "id": 1, "nome": "Renato Maionese", "cidade": "Franca" } ] }

这就是我从我的商店获取数据的方式：

constructor(
  private store: Store<{ count: number; userStates: Usuario }>
) {
  this.users$ = store.pipe(select('userStates'));
}

在我的模板中，我试图创建一个*ngFor：

<tr *ngFor="let usuario of users$.users | async">

但我收到这样的警告：

src/app/pages/usuario/usuario.component.html:32:32中的

错误-错误TS2339:属性'users‘在类型’可观察‘上不存在。

有一种方法可以从我的商店中获得用户对象，比如：

 this.users$ = store.pipe(select('userStates').users);

Answer 1

您需要扩展管道，select('userStates')不返回数据，它返回如何在存储中发生更改后获得userStates的说明。

要映射数据，有map操作符：https://www.learnrxjs.io/learn-rxjs/operators/transformation/map

import {map} from 'rxjs/operators';

this.users$ = store.pipe(
  select('userStates'),
  map(state => state.users), // now this.users$ returns users instead of state.
);

现在您可以在模板中使用它，而无需属性访问。

<tr *ngFor="let user of users$ | async">

Answer 2

<tr *ngFor="let usuario of (users$ | async)?.users">

如下所述，您可以使用选择器。另一个选择是

this.users$ = store.pipe(
             select('userStates'),
             map(userstates => userstates.users));