md-datepicker + 反应形式 + firebase + angular 4

Question

我有：
carico.model.ts

export class Carico {
  $key: string;
  dataCarico:  Date;
  riferimentoCarico: string;
  dettaglio:{
    carburante: string;
    quantita: string;
  }  
}

在我的服务中：
carichi.service.ts

import { Injectable } from '@angular/core';
....some code...    
import { Carico } from './carico.model';

@Injectable()
export class CarichiService {
  ...some code...    

  getCarichiList(query = {}): FirebaseListObservable<Carico[]> {
    if (!this.userId) return;
    this.carichi = this.db.list(`carico/${this.userId}`, { query: query }
    );
    return this.carichi
  }    
  ...some code...

  createCarico(carico: Carico): void {
    this.carichi.push(carico)
      .catch(error => this.handleError(error))
  }    
}

在我的表单组件中：
新加里科-form.component.ts

import { Carburante } from '../../impostazioni/carburanti/carburante.model';
import { CarburantiService } from '../../impostazioni/carburanti/carburanti.service';
...some code...

constructor(...) {    
    this.createForm();
  }

  ngOnInit() {
    this.carburanti = this.carburantiService.getCarburantiList();
  }

  createForm() {
    this.caricoForm = this.fb.group({
      dataCarico: Date,
      riferimentoCarico: [''],
      dettaglio: this.fb.group({        
        carburante: '',
        quantita: ''
      })
    });
  }

 inserisciCarico(carico: Carico) {
    this.carichiService.getCarichiList();       
    this.carichiService.createCarico(this.caricoForm.value);    
    this.caricoForm.reset();
  }

  onSubmit() {
  }

}

和我的 html:
新加里科形式-component.html

<md-card>  
    <form [formGroup]="caricoForm" novalidate>
      <md-card-content>
        <md-input-container >
          <input mdInput [mdDatepicker]="picker" placeholder="seleziona data" formControlName="dataCarico">
          <button mdSuffix [mdDatepickerToggle]="picker" ></button>
        </md-input-container>
        <md-datepicker #picker></md-datepicker>
        <span class="col"> </span>
        <md-input-container>
          <input mdInput placeholder="riferimento" formControlName="riferimentoCarico">
        </md-input-container>
        <table formGroupName="dettaglio">          
          <tr>
            <td>
              <md-select placeholder="carburante" formControlName="carburante">                    
...some code...

问题是我可以保存表格，唯一不起作用的是日期。我试图在订阅前后在控制台中显示，日期在表格中。有什么建议么？我在 Firebase 中返回，除了日期之外什么都有。

Answer 1

您不能将Date 对象推送到 firebase 数据库。您需要将 Date 转换为毫秒或使用 Date.prototype.toISOString() or Date.prototype.getTime()

之类的字符串

inserisciCarico(carico: Carico) {
   this.carichiService.getCarichiList();
   let formValue = this.caricoForm.value;
   formValue.dataCarico = formValue.dataCarico.getTime();
   // or
   // formValue.dataCarico = formValue.dataCarico.getISOString(); 

   this.carichiService.createCarico(formValue );    
   this.caricoForm.reset();
}

如果您使用 Object.prototype.toString.call(carico.dateCarico) 检查 dateCarico 的类型，您会看到它是 mdDatepicker 中的 [object Date]，这需要转换为毫秒或能够转到 firebase 数据库的字符串。

您可能需要修改 Carico class 以接受日期或字符串：

dataCarico:  Date | string;

希望对您有所帮助！

md-datepicker + 反应形式 + firebase + angular 4

md-datepicker + reactive forms + firebase + angular 4

angular-material2

angularfire2

angular

angular-reactive-forms

angular4-forms