将 2 个接口相互映射(包括示例以供理解)

Question

在我当前的项目中，我需要将这两个接口相互映射。我用一个api填充它们，使用服务(数据库是后端的数据存储(以及使用ngrx。

export interface Plant {
workplaceId: number;
orderState: number;
}

上

export interface OrderStatus {
orderStateId: number;
orderStateDesc: string;
}

orderState 与 orderStateId 相同。
orderState==orderStateId

我不确定我应该在哪里这样做，因为我只需要以HTML显示orderStateDesc，它显示了工作场所的状态。不确定它是否可以理解，如果您不理解它，请进一步提问。

提前谢谢。

Answer 1

创建一个新接口

export interface EnrichedPlant extends Plant {
orderStateObj: OrderStatus;
}

你可以做这样的事情：

this.enrichedPlants$ = combineLatest([this.plantsService.getAll(), this.orderStatusService.getAll()]).pipe(
map(([plants, orderStates]) => plants.map(plant => { return {
...plant,
orderStateObj: orderStates.find(orderState => order.orderStateId === plant.orderState)
};
})
),
);

并在 html 中

<div *ngFor"let plant of enrichedPlants$ | async">
orderStateDesc: {{ plant.orderStateObj.orderStateDesc }}
</div>