我想比較兩個日期。其中一個日期來自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>
你路過父母的模板預期輸入在此組件的任何可能性有多大? –
抱歉不理解您的問題 – pepelearnscode
如果您使用@Input裝飾器,意味着您[使用輸入綁定將數據從父項傳遞給子項](https://angular.io/guide/component-interaction#pass-data -from-parent-to-child-with-input-binding),對吧?如果是的話,你檢查了父母的模板? –