java - Angular5中的日期格式错误

Question

在后端使用 spring-boot ，我有一个名为干预的实体:

import com.fasterxml.jackson.annotation.JsonBackReference;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import org.springframework.format.annotation.DateTimeFormat;

import javax.persistence.*;
import java.io.Serializable;
import java.util.Date;

@Entity
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Intervention implements Serializable {

            @Id @GeneratedValue
            private Long Id;

            private String objet;

            @DateTimeFormat(pattern = "dd/MM/yyyy")
            private Date date;

            @Column(columnDefinition="BOOLEAN DEFAULT false")
            private boolean valid;

            @ManyToOne
            @JoinColumn(name = "Id_AppUser")
            @JsonBackReference(value="appuser-intervention")
            private AppUser appUser;

            @ManyToOne
            @JoinColumn(name ="Id_AppDevlopper")
            @JsonBackReference(value="appuser-intervention-devlopper")
            private AppUser app ;

}

我在前端使用 angular5，当我想保存新的干预时，一切正常，这就是 phpmyadmin 中保存日期的方式:

2018-06-22 13:10:2

当我尝试干预 Angular5 时，日期看起来像:

1529669422000

这是 spring 中的 Controller :

RequestMapping(value="clientsintervention",method= RequestMethod.GET)
    public Page<Intervention> getClientsIntervention(
            @RequestParam(name="page",defaultValue = "0") int page,
            @RequestParam(name="size",defaultValue = "5") int size,
            @RequestParam(name="id",defaultValue ="0") Long id
    ){

         AppUser appUser = userRepo.getOne(id);

         return interventionRepo.interventionsOfClient(appUser,new PageRequest(page,size));
    }

*在 Angular 中 client.service.ts :

getClientsIntervention(page:number , size:number , idClient:number){
    if(this.authService.getToken()==null) {
      this.authService.loadToken();

    }
    return this.http.get(this.host+
      "/clientsintervention?size="+size+"&page="+page+"&id="+idClient,{headers:new HttpHeaders({'Authorization':this.authService.getToken()})});
  }

intervention.component.ts

interventionsclients(){
    this.intervService.getClientsIntervention(this.page,this.size,this.id)
      .subscribe((data:any)=>{
        this.pageIntervention = data;
      },err=>{
        console.log('there is an error lady ! ');
      })
  }

intervention.component.html

<table class="table table-striped">
        <thead>
        <tr>
          <th>Numéro</th>
          <th>objet</th>
          <th>date</th>
          <th>Etat</th>

        </tr>
        </thead>
        <tbody>

        <tr *ngFor="let c of pageIntervention?.content">
          <td>{{c.id}}</td>
          <td>{{c.objet}}</td>
          <td>{{c.date}}</td>  //The problem of showing date format is here !!
          <td>
            <button type="button"  class="btn btn-warning" [hidden]="c.valid" >Non valide</button>
            <button type="button" class="btn btn-primary" [hidden]="!c.valid"  (click)="getDevlopperInformation(c.id)">Valide</button>

          </td>
        </tr>

        </tbody>
      </table>

用于保存新的干预:

 saveIntervention(){
       this.date = new Date(); 
       this.intervSevice.saveInterv( this.sujet, this.date , this.selectedTypeId , this.selectedProjectId , this.idClient)
       .subscribe((data:any)=> {
         swal("operation réussi !", "Great ! !", "success");
         this.router.navigate([ '../list' ], { relativeTo: this.activatedRoute });
     },err=>{
       console.log('this is error');
     })

我不明白为什么它看起来像这样，有什么想法吗？

Answer 1

要显示您需要使用的dd-mm-yyyy

{{c.date | date : 'dd-MM-yyyy'}}