MD-日期选择器+反应性形式+火力+角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)) 
    }  
} 

在我的表单部分：
new-carico-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()或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类来接受一个日期或字符串：

dataCarico: Date | string; 

希望帮助！