在模型中加载数据的最佳方式，Angular 2

Question

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

我正在获取 posts 数据用户 @ngrx 商店和效果。
Post 型号有 userId.
当我渲染 post 时，我不想显示 post.data 和 post.user.name

有什么方法可以用 posts 急切加载用户数据吗？

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

这是 post.model 的样子：

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

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

我没有得到包含 post 项的整个用户对象。我只得到 userIds。

编辑： 这就是我获取和呈现 posts:

的方式

post.effects.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
    ) { }

}

posts.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);
  }

}

posts.component.html

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

编辑 2： Post 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;
        }
    }
}

Answer 1

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

我正在从 posts.component.ts 中获取所有用户并将它们输入到 post-list 组件中。
里面的post-item组件我用post.userId过滤了所有用户，取了一个用户。

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

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

编辑：

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

Handle Multiple Angular 2 Models in ngrx with Computed Observables,

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

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)
      }));
    });
  }
}

在模型中加载数据的最佳方式，Angular 2

Best way to load data in model, Angular 2

ngrx

ngrx-effects

angular

ngrx-store