Angular

Question

我使用 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 并显示在前端

例如-后端服务returns

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

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

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

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

Answer 1

您无法重命名存在的对象的字段。这里有 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;
}

该对象是“通过引用”处理的，因此您不需要 return 它。

第二

您使用 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>

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

Angular - How to deal with Backend to Frontend naming convention?

javascript

camelcasing

naming-conventions

typescript