Angular 将2个接口映射到彼此中（包括示例以供理解）

在我当前的项目中，我需要将这两个接口相互映射。我会让他们填写一个api，既使用服务（数据库是后端的数据存储），也使用ngrx

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

在

orderState与orderStateId相同。

orderState==orderStateId

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

提前感谢。

创建一个新界面

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>

orderStateDesc:{{plant.orderStateObj.orderStateDesc}

您期望的输入和输出是什么？没有输入。但预期的输出应该包含：workplaceId、orderStateDesc。这将是真实数据：44，“取消”。我想在html中使用它，比如：{{plant.orderStateDesc}}类型方面，您可以简单地选择这些属性：

Type Merged=Omit&Omit

（类似于

pick

）

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