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; 

希望幫助！