Question

我正在写Angular Crud Aplication。在一个地方，用户创建并检索有关单个合约的信息。

@Component({
  selector: 'app-contract-detail-form',
  templateUrl: './contract-detail-form.component.html',
  styleUrls: ['./contract-detail-form.component.css']
})
export class ContractDetailFormComponent implements OnInit {
  frm: FormGroup;

  ngOnInit() {
    this.frm = this.fb.group(new ContractModel());
  }

  onActionSave() {
    console.log('----inserting ', this.frm.value);
    this.service.insert(this.frm.value);
  }

  onActionUpdate() {
    console.log('----updating ', this.frm.value);
    this.service.update(this.frm.value);
  }

  edit(id) {
    this.service.selectOne(id).subscriber(result => {
      console.log('-----selectOne: ', result.serverData[0]);
      this.frm.setValue(result.serverData[0]);
    });
  }

  new (){
    // open some form
  }

}

您将在此行中看到

 this.frm = this.fb.group(new ContractModel());

我正在使用某些类作为模型，用于保存表单数据：

export class ContractModel {
  id = null;
  contract_num = '';
  contract_date: Date = null;
  customer_name = '';
}

因此，当用户单击“新建”按钮时，将出现新合同的表单。然后，他填写此表单并单击“保存”按钮。它触发了onActionSave函数，该函数将该数据发送到后端。在此功能上就行

console.log('----inserting ', this.frm.value);

它显示以下内容

{
id: null, 
contract_num: "22", 
contract_date: Thu Sep 13 2018 00:00:00 GMT+0600 (Восточный Казахстан), customer_name: ""
}

没关系。但是，当用户要更新此数据时，他单击“更新”按钮以触发“编辑”功能。在此函数内部，数据从服务器检索。上线

console.log('-----selectOne: ', result.serverData[0]);

它显示以下内容：

{id: 8, 
contract_num: "22", 
contract_date: 1536775200000, 
customer_name: null
}

您可以看到'contract_date'属性表示为未解析的long值。然后当

this.frm.setValue(result.serverData[0]);

执行，网页上的所有表单字段均已填写，但“ contract_date”字段除外。

我了解，是因为它需要ISO-8601中的日期才能转移到setValue（）;

因此，当用户更改该表单中的某些数据（不是'contract_date'）并单击“更新”按钮时，它将触发onActionUpdate（），并在线

console.log('----updating ', this.frm.value);

正在显示

{id: 8, 
    contract_num: "22", 
    contract_date: 1536775200000, 
    customer_name: null
    }

但是，如果用户在该行上更改了“ contract_date”，它将显示

{id: 8, 
contract_num: "22", 
contract_date: Wed Sep 12 2018 00:00:00 GMT+0600 (Восточный Казахстан), customer_name: null
}

问题是如何使Angular解析DATE字段以响应来自服务器的响应？

另外，这里是“合同”模块的服务类

@Injectable({
  providedIn: 'root'
})
export class ContractsService {

  serverUrl = environment.serverUrl;

  constructor(private http: HttpClient) {
  }

  selectOne(id: number): Observable<ResultMessageModel<ContractModel>> {
    const requestUrl = `${this.serverUrl}contracts/selectOne/${id}`;
    return this.http.get<ResultMessageModel<ContractModel>>(requestUrl);
  }

  insert(model: ContractModel): Observable<ResultMessageModel<ContractModel>> {
    const requestUrl = `${this.serverUrl}contracts/insert`;
    return this.http.post<ResultMessageModel<ContractModel>>(requestUrl, model);
  }

  update(model: ContractModel): Observable<ResultMessageModel<ContractModel>> {
    const requestUrl = `${this.serverUrl}contracts/update`;
    return this.http.put<ResultMessageModel<ContractModel>>(requestUrl, model);
  }
}

和ResultMessageModel：

export class ResultMessageModel<T> {
  success: boolean;
  message: string;
  serverData: T[];
  count: number;
}

在后端，有带有Jackson库的Spring Framework，用于进行JSON响应

 @RestController
    @RequestMapping("/contracts")
    public class ContractsController {

        @Autowired
        ContractsService service;

        @GetMapping("/selectOne/{id}")
        public WebMessageModel selectOne(@PathVariable Long id) {
            return new WebMessageModel(true, service.selectOne(id));
        }

        @PostMapping("/insert")
        public WebMessageModel insert(@RequestBody ContractModel model) {
            return new WebMessageModel(service.insert(model));
        }

        @PutMapping("/update")
        public WebMessageModel update(@RequestBody ContractModel model) {
            return new WebMessageModel(service.update(model));
        }
    }

ContractModel.java

public class ContractModel extends WebDataModel {

    private Long id;
    private String contract_num;
    private Date contract_date;
    private String customer_name;

  // setters getters
    }

WebMessageModel.java

public class WebMessageModel {

    private String message;
    private boolean success;
    private List<WebDataModel> serverData;
    private int count;
  // getters setters
}

为什么Angular反应形式的日期无法正确显示

0 个答案: