在使用Angular和NGRX Entity时,可以使用selectors
来计算相同对象。下面是一个示例解决方法:
首先,确保已经安装了@ngrx/entity
和@ngrx/store
模块:
npm install @ngrx/entity @ngrx/store
接下来,在你的app.module.ts
文件中导入和配置StoreModule
和EntityReducer
:
import { StoreModule } from '@ngrx/store';
import { entityReducer } from './reducers';
import { EntityDataModule } from '@ngrx/entity';
@NgModule({
imports: [
StoreModule.forRoot({}),
EntityDataModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
然后,创建一个新的实体状态模型和选择器:
import { EntityState, EntityAdapter, createEntityAdapter } from '@ngrx/entity';
import { createSelector, createFeatureSelector } from '@ngrx/store';
export interface User {
id: number;
name: string;
}
export interface UserState extends EntityState {}
export const adapter: EntityAdapter = createEntityAdapter({
selectId: (user: User) => user.id,
sortComparer: false
});
export const initialState: UserState = adapter.getInitialState();
export const getUserState = createFeatureSelector('users');
export const {
selectAll
} = adapter.getSelectors(getUserState);
export const selectSameUsers = createSelector(
selectAll,
(users: User[]) => {
// 在这里编写计算相同对象的逻辑
// 这里只是一个简单的示例,比较name属性是否相同
return users.filter((user, index, self) => self.findIndex(u => u.name === user.name) === index);
}
);
最后,在你的组件中使用选择器获取相同对象:
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { User } from './user.model';
import { selectSameUsers } from './user.reducer';
@Component({
selector: 'app-user-list',
template: `
-
{{ user.name }}
`
})
export class UserListComponent implements OnInit {
sameUsers$: Observable;
constructor(private store: Store) {}
ngOnInit() {
this.sameUsers$ = this.store.select(selectSameUsers);
}
}
请注意,这只是一个示例,你可以根据你的需求调整selectSameUsers
选择器中的逻辑。