类型“未定义”不可分配给类型“日期”

Question

实际上，我想在我的页面上显示记录的日期。为此，我创建了一个显示记录的日期的函数。但是当我发现意外错误时，我被卡住了。

这是我的代码：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { BookService } from 'src/app/services/book.service';

@Component({
  selector: 'app-update-book',
  templateUrl: './update-book.component.html',
  styleUrls: ['./update-book.component.css']
})
export class UpdateBookComponent implements OnInit {

  updateBookForm:FormGroup
  book:any
  constructor(private service:BookService,private route : ActivatedRoute,private   router:Router,private fb:FormBuilder) { }

  ngOnInit(): void {
    this.service.getBookById(this.route.snapshot.params.id).subscribe(data=>{
      this.book=data;

      this.updateBookForm = this.fb.group({
        id:[data.id],
        title:[data.title, Validators.required],
        author:[data.author, Validators.required],
        description:[data.description, Validators.compose([Validators.required, Validators.minLength(30)])],
        rate:[data.rate],
        dateStart:[this.formatDate (data.dateStart)],
        dateRead:[data.dateRead],
      })
    })
  }

  formatDate(date: Date){
    if(date){
      return new Date(date).toISOString().substring(0,10);
    }
  }

  onSubmit()
  {

  }

}

我在这里创建了“formatDate”功能，但这是我面临的主要问题。

这是我的错误：-

我将如何解决这个问题。请帮忙。

更新

更新-book.component.html

<div class="update-book">

    <form [formGroup]="updateBookForm"(ngSubmit)="onSubmit()">
        
        <div class="form-group">
          <label for="title" class="required">Title</label>
          <input type="text" class="form-control" id="title" formControlName="title" placeholder="Book Title">
        </div>
        <div class="form-group">
            <label for="author" class="required">Author</label>
            <input type="text" class="form-control" id="author" formControlName="author" placeholder="Book Author">
        </div>
        <div class="form-group">
            <label for="description" class="required">Description</label>
            <input type="text" class="form-control" id="description" formControlName="description" placeholder="Book Description">
        </div>
    
        <div class="row">
    
            <div class="col-md-4 col-xs-4 col-sm-4">
                <div class="form-group">
                    <label for="dateStart">Date Start</label>
                    <input type="date" class="form-control" id="dateStart" formControlName="dateStart" placeholder="Date Start">
                </div>
            </div>
            <div class="col-md-4 col-xs-4 col-sm-4">
                <div class="form-group">
                <label for="dateRead">Date Read</label>
                    <input type="date" class="form-control" id="dateRead" formControlName="dateRead" placeholder="Date Read">
                    </div>
            </div>
            <div class="col-md-4 col-xs-4 col-sm-4">
                <div class="form-group">
                    <label for="rate">Rate</label>
                    <input type="number" min="0" max="5" class="form-control" id="rate" formControlName="rate" placeholder="Rate">
                </div>
            </div>
    
        </div>
        <button class="btn btn-success" type="submit">UPDATE</button>
        <button class="btn btn-danger" type="submit" [routerLink]="['/books']" >CANCEL</button>
    </form>
    </div>

book.service.ts

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { Book } from '../interfaces/book'


@Injectable({
  providedIn: 'root'
})
export class BookService {

  readonly baseURL ="http://localhost:59750/api/Books"


  constructor(private http: HttpClient) { }


  getAllBooks()
  {
    return this.http.get<Book[]>(this.baseURL+"/GetBooks");
  }

  addBook(book: Book){
    return this.http.post(this.baseURL+"/AddBook/", book);
  }

  getBookById(id:number)
  {
        return this.http.get<Book>(this.baseURL+"/SingleBook/"+id);
  }

  upDateBook(book:Book){
    return this.http.put(this.baseURL+"/UpdateBook/"+book.id,book);
  }

  

}

更新

book.ts

export  interface Book
{
    id: number;
    title: string;
    description: string;
    author: string;
    rate?: number;
    dateStart?: Date;
    dateRead? : Date;
}

Answer 1

关于您的问题和更新。您的问题是 dateStart 是您 Book 类的可选属性。这就是您收到错误消息的原因

类型参数 'Date | undefined' 不能分配给'Date' 类型的参数

因为这个属性可能没有被设计定义。

在我看来，要改变这一点，你有两个选择。

1. 将dateStart 属性设为“正常”属性，这样编译器就可以通过删除? 来知道该属性已设置。

2. 您可以尝试将属性转换为Date

   dateStart:[this.formatDate(data.dateStart as Date)],
   

这也应该可以防止错误消息，但您需要注意formatDate 函数中潜在的未定义值