angular - Angular - Ngrx 实体收集服务基础 - 序列化
问题描述
在我当前的项目中,我有一个带有 nestjs 的后端和一个有角度的前端。
我正在使用ngrx实体从我的服务的后端加载一些数据,如下所示:
日历事件.service.ts
@Injectable({
providedIn: 'root'
})
export class CalendarEventService extends EntityCollectionServiceBase<CalendarEvent> {
constructor(elementsFactory: EntityCollectionServiceElementsFactory) {
super('CalendarEvent', elementsFactory);
}
}
我有我的实体元数据设置
import {
EntityMetadataMap,
EntityDataModuleConfig,
DefaultDataServiceConfig,
} from '@ngrx/data';
const entityMetadata: EntityMetadataMap = {
CalendarEvent: {},
};
const pluralNames = {};
export const entityConfig: EntityDataModuleConfig = {
entityMetadata,
pluralNames,
};
export const defaultDataServiceConfig: DefaultDataServiceConfig = {
entityHttpResourceUrls: {
CalendarEvent: {
collectionResourceUrl: 'http://localhost:3000/api/calendar/',
entityResourceUrl: 'http://localhost:3000/api/calendar/',
},
},
};
当我从 app.component.ts 加载数据时,我的数据加载正常
import { Observable } from 'rxjs';
import { Component, OnInit } from '@angular/core';
import { CalendarEventService } from './shared/services/calendar-event.service';
import { CalendarEvent } from 'angular-calendar';
@Component({
selector: 'app-root',
template: `
<app-shell class="app-shell">
<router-outlet></router-outlet>
</app-shell>
`,
})
export class AppComponent implements OnInit {
title = 'memento-front';
events$: Observable<CalendarEvent[] | any>;
constructor(private readonly events: CalendarEventService) {
this.events$ = this.events.filteredEntities$;
}
ngOnInit(): void {
this.events.load();
}
}
我看他们很好:
{ "id": 2, "title": "Second event", "start": "2021-08-13T17:22:43.192Z", "color": { "primary": "#1e90ff", "secondary": "#D1E8FF" } }
我想要实现的是当数据被序列化而不是开始字符串日期时,创建一个 Date 对象。这个想法会做类似的事情
const entityMetadata: EntityMetadataMap = {
CalendarEvent: {
filterFn: (events) => {
events.map(event => event.start = new Date(event.start));
return events;
}
},
};
但不是在调用 filterFn 时做,而是在进行 http 调用时做,在它变得不可变之前做
我尝试使用 ngrx 实体收集服务库查找序列化,但我没有找到任何让我知道如何在从 http 调用加载时对数据属性采取一些操作的信息
解决方案
我尝试使用 ngrx 实体收集服务库查找序列化,但我没有找到任何让我知道如何在从 http 调用加载时对数据属性采取一些操作的信息
您可以按照以下步骤在 api 调用时对数据属性执行操作:
app.component.ts
:
this.events$ = store.select(selectAllEvents);
this.eventsService.load().subscribe(events => {
this.store.dispatch(EventsApiActions.evensLoaded({ events }));
});
app/events/actions/events-api.actions.ts
export const eventsLoaded = createAction(
"[Events API] Events Loaded Success",
props<{ events: CalendarEvent[] }>()
);
app/shared/state/events.reducer.ts
export interface State {
collection: CalendarEvent[];
...
}
export const initialState: State = {
collection: [],
...
};
export const eventsReducer = createReducer(
initialState,
on(EventsApiActions.eventsLoaded, (state, action) => {
return {
...state,
collection: action.events
};
}),
...
);
collection: action.events
现在,您可以将 with 传递给您的实用函数,而不是使用 改变事件集合filterFn
:
const mappedEvents = (events: CalendarEvents[]) =>
events.map((event) => event.start = new Date(event.start))
});
现在你可以在这里使用它:
on(EventsApiActions.eventsLoaded, (state, action) => {
return {
...state,
collection: mappedEvents(action.events)
};
}),
最后是选择器(events.reduce.ts
):
export const selectAll = (state: State) => state.collection;
export const selectEventsState = (state: State) => state.events;
export const selectAllEvents = createSelector(
selectEventsState,
selectAll
);
推荐阅读
- swagger - Swagger 从没有注释的 YAML 规范生成代码
- python - 天蓝色虚拟机操作
- swift - 从 String 到 UnsafePointer 的最佳转换是什么
? - azure-devops - 适用于 nopCommerce 4.xx 的 Azure DevOps(又名 VSTS)构建定义
- c# - 返回未经授权的 ViewResult
- python - 使用 python 转换为 CSV UTF-8 时,我的日期列正在转换为日期时间
- styles - 如何调整表格单元格边框的样式?
- ruby - has_many 在关联用户和项目时通过关联错误
- javascript - 输入范围和计算
- spring-boot - 如何使用 gradle 在 spring-boot 中生成 JPA 元模型?(+ lombok)