2017-10-06 51 views
1

我想比較兩個日期。其中一個日期來自input="date",另一個是日期對象的新實例。傳遞參數時給出新日期爲無效

從app.component.ts獲取日期,通過數據綁定從日期輸入獲取其日期值。

給出了錯誤>>>>> 無法讀取的特性 '分裂' 未定義

@Input() taskDt; 
    dtArr = this.taskDt.split('-'); 
    taskDtform = new Date(this.dtArr[0], this.dtArr[1] - 1, this.dtArr[2]).getTime(); 
    currentDt = new Date().getTime(); 
    constructor(private render: Renderer2, private eleRef: ElementRef) { } 

//應用程序組件TS

import { Component, OnInit, OnChanges, SimpleChanges } from '@angular/core'; 
import { FormGroup, Validators, FormBuilder } from '@angular/forms'; 
import { ITaskDetails } from './interfaces/task-details'; 
import { TaskService } from './services/task.service'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit, OnChanges { 
    currentDate: {}; 
    taskForm: FormGroup; 
    taskArr: ITaskDetails[] = []; 
    taskObj: ITaskDetails = { 
    title: '', 
    description: '', 
    date: null 
    }; 

    constructor(private taskSer: TaskService, private fb: FormBuilder) { 
    this.currentDate = new Date().toISOString().substring(0, 10); 
    } 

    reset() { 
    this.taskForm.reset(); 
    this.taskForm.get('date').patchValue(this.currentDate); 
    } 

    ngOnInit() { 
    // this.taskForm = new FormGroup({ 
    // 'taskTitle': new FormControl('', Validators.required), 
    // 'description': new FormControl('', Validators.required), 
    // 'date': new FormControl(this.currentDate, Validators.required) 
    // }); 

    this.taskForm = this.fb.group({ 
     taskTitle: ['', Validators.required], 
     description: [''], 
     date: [this.currentDate, Validators.required] 
    }); 
    console.log(this.taskForm); 
    } 

    ngOnChanges(changes: SimpleChanges) { 
    console.log(changes); 
    } 
    onSubmit() { 
    // this.taskObj.title = this.taskForm.get('taskTitle').value; 
    // this.taskObj.description = this.taskForm.get('description').value; 
    // this.taskObj.date = this.taskForm.get('date').value; 

    this.taskObj.title = this.taskForm.value.taskTitle; 
    this.taskObj.description = this.taskForm.value.description ? this.taskForm.value.description : 'N/A'; 
    this.taskObj.date = this.taskForm.value.date; 
    console.log(this.taskObj); 


    this.taskSer.setData(this.taskObj); 
    console.log({ ...this.taskObj }); 
    this.taskArr = this.taskSer.getdata(); 
    console.log(this.taskArr); 

    this.taskForm.reset(); 
    this.taskForm.get('date').patchValue(this.currentDate); 
    } 

} 

我也試過這樣做,但它給invalid date error

taskDtform = new Date(this.taskDt); <<<<<<<<< gives invalid date 
    currentDt = new Date(); 

//這是任務列表組件,其中的變量BLE taskLst定義

export class TaskListComponent implements OnInit { 
    @Input() taskLst; 
    constructor() { } 

ngOnInit() { 
    console.log(this.taskLst); 
    } 

} 

//正是在這裏勢必

<tr *ngFor="let task of taskLst; let i = index" [taskDt]="task.date"> 

//應用程序組件的HTML模板

<section class="container"> 
    <app-task-list [taskLst]="taskArr"></app-task-list> 
</section> 
+0

你路過父母的模板預期輸入在此組件的任何可能性有多大? –

+0

抱歉不理解您的問題 – pepelearnscode

+0

如果您使用@Input裝飾器,意味着您[使用輸入綁定將數據從父項傳遞給子項](https://angular.io/guide/component-interaction#pass-data -from-parent-to-child-with-input-binding),對吧?如果是的話,你檢查了父母的模板? –

回答

1

嘗試傳遞taskDt你的if語句雙向的。並將currentDt轉換爲Iso子字符串,就像在構造函數中一樣。然後比較兩者。

taskDt發生錯誤,因爲它沒有被初始化。它更好地直接通過財產。

希望它有幫助!

@Input() taskDt; 
    currentDt = new Date().toISOString().substring(0, 10); 
0

把所有的ngOnInit

@Input() taskDt; 
taskDtform; 
currentDt; 

constructor(private render: Renderer2, private eleRef: ElementRef) implements onInit { } 
ngOnInit() 
{ 
    if (this.taskDt) 
    { 
     let dtArr = this.taskDt.split('-'); 
     this.taskDtform = new Date(dtArr[0], dtArr[1] - 1, dtArr[2]).getTime(); 
     this.currentDt = new Date().getTime(); 
    } 
} 
相關問題