传递参数时将新日期指定为无效

Question

我想比较两个日期。其中一个日期来自 input="date"，另一个是日期对象的新实例。

从 app.component.ts 通过数据绑定获取日期，它从日期输入中获取日期值。

报错>>>>> 无法读取未定义的属性 'split'

 @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();

//这是定义变量taskLst的tasklist组件

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>

Answer 1

尝试将 taskDt 传递给您的 if 语句。并将 currentDt 转换为 Iso 子字符串，就像您在构造函数中所做的那样。然后比较两者。

taskDt 出错，因为它没有被初始化。直接传属性比较好。

希望对您有所帮助！

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

Answer 2

全部放在一个 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();
     }
 }

传递参数时将新日期指定为无效

Giving new date as invalid, when passing an argument

angular

date

typescript

ecmascript-6

angular-forms