以角度获取日期值以添加新用户

Question

我有一些用户的数据库，我必须在此列表中添加一个新用户，但日期值有问题。我将字段“nome(name)”和“cognome(surname)”与 nome.value 一起使用，因为它们是字符串，但 anno_n(birth) 有问题，因为它是 Date 类型

COMPONENT.HTML

  <div class="lista pt-5">
    <h2 class="text-dark">Aggiungi un nuovo partecipante</h2>
    <form class="row row-cols-lg-auto g-3 align-items-center float-center" (ngSubmit)="add(nome.value, cognome.value, anno_n.value)" (ngSubmit)="loadUser()" style="justify-content: center;">
      <div class="col-12">
        <label class="visually-hidden" for="inlineFormInputGroupUsername">Nome</label>
        <div class="input-group">
          <input type="text" class="form-control" id="inlineFormInputGroupUsername" required #nome placeholder="Nome">
        </div>
      </div>
      <div class="col-12">
        <label class="visually-hidden" for="inlineFormInputGroupUsername">Cognome</label>
        <div class="input-group">
          <input type="text" class="form-control" id="inlineFormInputGroupUsername" required #cognome placeholder="Cognome">
        </div>
      </div>
      <div class="col-12">
        <label class="visually-hidden" for="inlineFormInputGroupUsername">Data di nascita</label>
        <div class="input-group">
          <input type="date" class="form-control" id="inlineFormInputGroupUsername" required ng-model="anno_n.value" #anno_n useValueAsDate placeholder="Data di nascita (GG/MM/AAAA)">
        </div>
      </div>
    
      <div class="col-12">
        <button type="submit" class="btn btn-primary shadow-lg">Salva</button>
      </div>
    </form>
    </div>

COMPONENT.TS

add(nome: string, cognome: string, anno_n: string): void {
      this.PartecipantiService.addP(nome, cognome, anno_n).subscribe(res => {
          console.log(res);
          this.loadUser();
        })
      }

export interface Partecipanti {
    id: number;
    nome: string;
    cognome: string;
    anno_n: Date;
  }


SERVICE.TS
addP(nome: string, cognome: string, anno_n: string): Observable<any> {
     return this.http.post<Partecipanti>(this.partecipantiUrl, {
       nome: nome,
       cognome: cognome,
       anno_n: new Date(anno_n)
     }, this.httpOptions).pipe(
       tap((newPartecipante: Partecipanti) => this.log(`partecipante aggiunto w/ id=${newPartecipante.id}`)),
       catchError(this.handleError<Partecipanti>('addP'))
     );
   }

Answer 1

您正在使用“日期”类型的输入 - 这已经返回了一个日期，并且您再次将其转换为您的服务中的日期。从您的 POST 调用中删除 anno_n: new Date(anno_n)，看看这是否有效。

Answer 2

在您的服务中添加console.log

addP(nome: string, cognome: string, anno_n: string): Observable<any> {
     console.log(new Date(anno_n))
     ...
   }

如果它打印正确的日期，那么你的问题出在 api 上，它可能不接受日期对象。为什么还要麻烦转换它？只需将其保留为字符串，并在需要时进行转换。

export interface Partecipanti {
    id: number;
    nome: string;
    cognome: string;
    anno_n: string;
  }

addP(nome: string, cognome: string, anno_n: string): Observable<any> {
     return this.http.post<Partecipanti>(this.partecipantiUrl, {
       nome: nome,
       cognome: cognome,
       anno_n: anno_n
     }, this.httpOptions).pipe(
       tap((newPartecipante: Partecipanti) => this.log(`partecipante aggiunto w/ id=${newPartecipante.id}`)),
       catchError(this.handleError<Partecipanti>('addP'))
     );
   }

编辑

所以你的 api 可能需要一个 string number 或 Date 对象。

从Date 转换为string (YYYY-MM-DDTHH:mm:ss.sssZ)

myDateString = myDateObject.toISOString()

从Date 转换为number（unix 毫秒）

unixMillis = myDateObject.getTime()

Date constructor 接受这两个值以将它们转换回日期对象。

myDateObject = new Date(myDateString)

或

myDateObject = new Date(unixMillis)

您需要弄清楚您的 api 实际需要什么，并确保发送时anno_n 的格式正确。