从Cloud Firestore接收MatDatePicker中的日期类型值

Question

从Cloud Firestore接收MatDatePicker中的日期类型值

在搜索 Cloud Firestore 的文档时，我拥有的文档中有为我的应用程序返回的类型为Timestamp的字段。

我正在应用程序中使用Angular Material的组件。

MatDatePicker组件必须接收类型为Date()的对象，并且在返回的集合的文档中，日期类型的字段带有类型为Timestamp的值。 / p>

model.ts：

export class Todo {
    id: string;
    title: string;
    notes: string;
    startDate: Date;
    dueDate: Date;
    completed: boolean;
    starred: boolean;
    important: boolean;
    deleted: boolean;
    tags: {};
    tagList: [
        {
            'id': number,
            'name': string,
            'label': string,
            'color': string
        }
    ];

    /**
     * Constructor
     *
     * @param todo
     */
    constructor(todo) {
        {
            this.id = todo.id;
            this.title = todo.title;
            this.notes = todo.notes;
            this.completed = todo.completed;
            this.starred = todo.starred;
            this.important = todo.important;
            this.deleted = todo.deleted;
            this.tags = todo.tags || {};
            this.tagList = todo.tagList || [];


            // FIXME
            if (todo.dueDate && typeof todo.dueDate['toDate'] === 'function') {
                this.dueDate = todo.dueDate.toDate();
            } else {
                this.dueDate = todo.dueDate;
            }

            if (todo.startDate && typeof todo.startDate['toDate'] === 'function') {
                this.startDate = todo.startDate.toDate();
            } else {
                this.startDate = todo.startDate;
            }
        }
    }

component.html：

            <mat-form-field class="mr-sm-24" fxFlex>
                <input matInput [matDatepicker]="startDatePicker" formControlName="startDate" placeholder="Data de ínicio" required>
                <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
                <mat-datepicker #startDatePicker></mat-datepicker>
            </mat-form-field>

            <mat-form-field fxFlex>
                <input matInput [matDatepicker]="dueDatePicker" formControlName="dueDate" placeholder="Data término" required>
                <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
                <mat-datepicker #dueDatePicker></mat-datepicker>
            </mat-form-field>

component.ts：

import { Todo } from 'app/main/gerenciamento/todo/todo.model';

export class TodoDetailsComponent implements OnInit, OnDestroy {
    todo: Todo;

/**
 * On init
 */
ngOnInit(): void {
    // Subscribe to update the current todo
    this._todoService.onCurrentTodoChanged
        .pipe(takeUntil(this._unsubscribeAll))
        .subscribe(([todo, formType]) => {

            if (todo && formType === 'edit') {
                this.formType = 'edit';
                this.todo = todo; // Return of the Cloud Firestore
                this.todoForm = this.createTodoForm();

                this.todoForm.valueChanges
                    .pipe(
                        takeUntil(this._unsubscribeAll),
                        debounceTime(500),
                        distinctUntilChanged()
                    )
                    .subscribe(data => {
                        this._todoService.updateTodo(data);
                    });
            }
        });

    // Subscribe to update on tag change
    this._todoService.onTagsChanged
        .pipe(takeUntil(this._unsubscribeAll))
        .subscribe(labels => {
            this.tags = labels;
        });

    // Subscribe to update on tag change
    this._todoService.onNewTodoClicked
        .pipe(takeUntil(this._unsubscribeAll))
        .subscribe(() => {
            this.todo = new Todo({});
            this.formType = 'new';
            this.todoForm = this.createTodoForm();
            this.focusTitleField();
            this._todoService.onCurrentTodoChanged.next([this.todo, 'new']);
        });
}

/**
 * Create todo form
 *
 * @returns {FormGroup}
 */
createTodoForm(): FormGroup {
    return this._formBuilder.group({
        'id': [this.todo.id],
        'title': [this.todo.title],
        'notes': [this.todo.notes],
        'startDate': [this.todo.startDate, Validators.required],
        'dueDate': [this.todo.dueDate, Validators.required],
        'completed': [this.todo.completed],
        'starred': [this.todo.starred],
        'important': [this.todo.important],
        'deleted': [this.todo.deleted],
        'tags': [this.todo.tags],
        'tagList': [this.todo.tagList]
    });
}

在调试时，我意识到您要多次通过构建器。

第一次出现类型Timestamp的值，第二次出现Date()对象。

我需要确保startDate和dueDate字段的值始终是Date()对象。

因此，我在model.ts文件中进行了以下验证，但是我没有找到正确的方法。

MatDatePicker组件必须接收一个Date()对象的值。

如何使这项工作尽可能准确地避免我的应用程序将来出现日期时间错误？