角度模型数据到spring pojo类的映射不起作用

时间:2018-08-10 07:48:06

标签: java spring angular typescript angular-ui-router

我正在尝试将角度模型类映射到我的弹簧模型类。但是,在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
}

add-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打印的响应

  

{“展示次数”:“广告系列”,“点击次数”:“预算”,“收入”:“预算”}

1 个答案:

答案 0 :(得分:0)

首先,您应该根据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);
}

您不需要对对象进行分类。

对于您来说,我还建议您使用接口代替打字稿对象的对象:

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