角度模型数据到Spring Pojo类的映射不起作用

Question

我正在尝试将角度模型类映射到我的弹簧模型类。 但是，在spring模型类中，所有实体均显示为null。 下面是我曾经做过的代码，但是无法将角度模型数据映射到spring pojo类。

HeaderMappingDetails.java

public class HeaderMappingDetails{
    String Impressions;
    String Clicks;
    String Revenue;
    //getters and setters
}

headermappingdetails.ts

export class HeaderMappingDetails{
    public Impressions:string;
    public Clicks:string;
    public Revenue:string
}

附加client.component.ts

saveHeaders(){
   this.clientService.saveHeaders(this.headerMap).subscribe(
       res=>{
           console.log(res);       
       },error=>{
           console.log(error);
       }
   );     
}

client.service.ts

saveHeaders(mapHeaders:HeaderMappingDetails){

    let url = this.serverPath+'/user/saveHeaders';
    let tokenHeader = new Headers({
    'Content-Type' : 'application/json',
    'x-auth-token' : localStorage.getItem('xAuthToken')
 });
    console.log(JSON.stringify(mapHeaders));
    return this.http.post(
        url,JSON.stringify(mapHeaders),
        {headers :   tokenHeader}
    );

}

addClient.html

<form [hidden]="!showMapper" (ngSubmit)="saveHeaders()">
    <mat-form-field class="full-width">
        <mat-select placeholder="Map Impression As" [(ngModel)]="headerMap.Impression" id="Impression" name="Impression">
                <mat-option *ngFor="let option of mapper" [value]="option">{{option}}</mat-option>
            </mat-select>
    </mat-form-field>
    <mat-form-field class="full-width">
        <mat-select placeholder="Map Clicks As" [(ngModel)]="headerMap.Clicks" id="Clicks" name="Clicks">
            <mat-option *ngFor="let option of mapper"  [value]="option">{{option}}</mat-option>
        </mat-select>
    </mat-form-field>
    <mat-form-field class="full-width">
        <mat-select placeholder="Map Revenue As" [(ngModel)]="headerMap.Revenue" id="Revenue" name="Revenue">
            <mat-option *ngFor="let option of mapper"  [value]="option">{{option}}</mat-option>
        </mat-select>
    </mat-form-field>
    <button mat-raised-button type="submit" class="mat-primary">Save Mapped Headers</button>
</form>

HeaderMappingController.java

@PostMapping(value = "/saveHeaders")
public HeaderMappingDetails saveHeaders(@RequestBody HeaderMappingDetails headerMappingDetails) throws Exception {
    Integer clientId = Integer.parseInt(jedis.get("emailClientId"));
    boolean isSuccess = headerMappingService.saveHeaders(headerMappingDetails, clientId);
    return headerMappingDetails;
}

这是我的控制台中用angular打印的响应

{ “印象”： “运动”， “点击次数”： “预算”， “收入”： “预算”}

Answer 1

首先，您应该根据Java语言标准命名变量。 在您的情况下，使它们以小写字母开头（仅类应具有大写优先的后者）。 另外，将所有变量设为私有：

public class HeaderMappingDetails{
    private String impressions;
    private String clicks;
    private String revenue;
    // getters and setters
}

您的角度代码对我来说还可以，我使用它的方式有所不同：

saveHeaders(mapHeaders:HeaderMappingDetails){
    let url = this.serverPath+'/user/saveHeaders';
    const headers: HttpHeaders = new HttpHeaders();
    headers.set("content-type", "application/json");
    headers.set("x-auth-token", localStorage.getItem('xAuthToken'));
    const options = {
      headers: headers
    };
    console.dir(mapHeaders);
    return this.http.post(url, mapHeaders, options);
}

您无需对对象进行字符串化。

在您的情况下，我还建议您使用接口代替Typescript对象的对象：

export interface IHeaderMappingDetails {
    impressions: string;
    clicks: string;
    revenue: string;
}