Angular - 如何处理后端到前端的命名约定？

如何解决Angular - 如何处理后端到前端的命名约定？

我使用 Angular 作为前端，使用 Postgresql 作为数据库。

下面的接口是服务正在消费的数据库中的列名

export interface AmazonDataLog {  
    customer_id: number;
    first_target: string;
    last_target: string;
   
}

下面是 ts 文件，其中 processIncomingRecord 函数将获取数据然后在 UI 上呈现

component.ts 文件

  firstLogs: AmazonDataLog | undefined = undefined;
 
  constructor(
    public userService: UserService,private records: AmmaService,private router: Router
  ){

    this.records.getNextRecord().subscribe(data => {
      this.processIncomingRecord(data);
    });

下面是显示数据的HTML代码

.html 代码

 <mat-divider></mat-divider>
 <mat-list-item class="bold">Amazon {{firstLogs.customer_id}} : {{firstLogs.first_target}}</mat-list-item>
 <mat-divider></mat-divider>
 <mat-divider></mat-divider>
 <mat-list-item class="bold">Alexa {{firstLogs.customer_id}} : {{firstLogs.last_target}}</mat-list-item>
 <mat-divider></mat-divider>
            

我正在寻找的是将 RENAME 后端变量设置为 CAMEL CASE 并在前端显示

例如 - 后端服务返回

    customer_id: number;
    firstTarget: string;
    lastTarget: string;

例如 - 在 UI 上我想显示为 CAMEL CASE

   {{customerID}} {{firstTarget}} and {{lastTarget}} 

我怎样才能实现这种改变？

解决方法

当对象存在时，您不能重命名它的字段。您在这里有 2 个选择。

第一个

在界面中定义 3 个可选字段

export interface AmazonDataLog {
    customer_id: number;
    first_target: string;
    last_target: string;
    customerID?: number;
    firstTarget?: string;
    lastTarget?: string;
}

然后你在你只映射值的地方放置一个方法。

mapToCamelCase(data: AmazonLogData): void {
    data.customerID = data.customer_id;
    data.firstTarget = data.first_target;
    data.lastTarget = data.last_target;
}

对象通过“引用”进行处理，因此您无需返回它。

第二个

您使用 CamelCase 中的名称构建第二个界面，然后进行映射。

export interface CcAmazonDataLog {
    customerID: number;
    firstTarget: string;
    lastTarget: string;
}


// You can remove the unnecessary fields afterwards,// But be sure that you never ever need to access them again later!
// the delete-lines are commented out (just as a precaution)
mapToCamelCase(data: AmazonLogData): CcAmazonLogData  {
   // instantiate an object ccdata using the interface CcAmazonLogData
   // [...]

    ccdata.customerID = data.customer_id;
    // delete data.customer_id;
    ccdata.firstTarget = data.first_target;
    // delete data.first_target;
    ccdata.lastTarget = data.last_target;
    // delete data.last_target;

    return ccdata;
}

然后做这样的事情

TS 文件

this.records.getNextRecord().subscribe(data => {
    this.mapToCamelCase(data);
    this.processIncomingRecord(data);
});

HTML

 <mat-divider></mat-divider>
 <mat-list-item class="bold">Amazon {{firstLogs?.customerID}} : {{firstLogs?.firstTarget}}</mat-list-item>
 <mat-divider></mat-divider>
 <mat-divider></mat-divider>
 <mat-list-item class="bold">Alexa {{firstLogs?.customerID}} : {{firstLogs?.lastTarget}}</mat-list-item>
 <mat-divider></mat-divider>