0

以下是关于我的项目的一些信息：

  1. 我正在获取帖子数据用户@ngrx商店和效果。
  2. 帖子模型有userId。
  3. 当我渲染帖子时，我不想显示post.data和post.user.name

有没有办法通过帖子急切加载用户数据？

这个问题的最佳解决方案是什么？

post.model看起来是这样的：

import { User } from './user.model';

export class Post {
    userId: number;
    id: number;
    title: string;
    body: string;
    user?: User;
}

我没有得到带有帖子项目的整个用户对象。我只得到用户ID。

编辑：这就是我获取和呈现帖子的方式：

后期效果.ts

@Injectable()
export class PostEffects {

    @Effect()
    posts$: Observable<Action> = this.actions$
        .ofType(postActions.LOAD_LIST)
        .debounceTime(300)
        .startWith(new postActions.LoadListAction())
        .switchMap(() => {
            return this.postsService.all()
                .map((posts: Post[]) => new postActions.LoadListSuccessAction(posts))
                .catch(error => of(new postActions.LoadListFailAction(error)));
        });

    constructor(
        private actions$: Actions,
        private postsService: PostsService
    ) { }

}

post.component.ts

export class PostsComponent {

  posts$: Observable<Post[]>;
  loaded$: Observable<boolean>;

  constructor(private store: Store<State>) {
    this.posts$ = store.select(rootReducers.getPostItems);
    this.loaded$ = store.select(rootReducers.getPostLoaded);
  }

}

post.component.html

<div class="content">
    <app-post-list [posts]="posts$ | async"></app-post-list>
</div>
<!-- /.content -->

编辑2：发布reducer文件内容

post.reducer.ts

export function reducer(state = initialState, {type, payload}: postActions.Actions): State {
    switch (type) {
        case postActions.LOAD_LIST: {
            return Object.assign({}, state, {
                loading: true
            });
        }

        case postActions.LOAD_LIST_SUCCESS: {
            return {
                loaded: true,
                loading: false,
                items: payload,
                selectedItem: state.selectedItem
            };
        }

        default: {
            return state;
        }
    }
}
4

1 回答 1

0

我找到了解决方案，但我认为它并不完美。

  1. 我正在从posts.component.ts获取所有用户并将它们输入到post-list组件中。
  2. 我正在使用 post.userId 过滤所有用户并获取一个用户的内部post-item组件。

我以为这会很慢，但事实并非如此。这样我只发出两个http请求。帖子和用户请求。

目前我找不到更好的解决方案。如果你有一个，我会很高兴整合它。

编辑：

呵呵，我想我找到了解决方案：

使用 Computed Observables 处理 ngrx 中的多个 Angular 2 模型，

在本文中，我找到了代码片段，它对我有用：

export class UsersItemsService {
  constructor(private store: Store<AppStore>) { }

  getUsersItems(): Observable<UserItems[]> {
    const users$: Observable<User[]> = this.store.select('users');
    const items$: Observable<Item[]> = this.store.select('items');

    return Observable.combineLatest(users$, items$, (users, items) => {
      return users.map(user => Object.assign({}, user, {
        items: items.filter(item => item.userId === user.id)
      }));
    });
  }
}
于 2017-06-27T14:27:11.153 回答