(Angular) error typeerror无法读取未定义的属性'date‘

Question

嗨，我是新来Angular的，被一些东西卡住了。我正在尝试从输入中读取属性并将其传输到服务器，该服务器将把数据放入数据库，但到达服务器的对象为null，原因如下：`错误类型错误无法读取未定义日期的属性‘’

我猜问题出在[(ngModel)]="Productivity.Date"的这条线上

这可能是一个新手的错误，我已经尝试过测试可能的解决方案，但还没有找到适合我的问题的示例。

IntroducingLaborProductivity.html

                        <div class="col-1">
                            <div class="input-group-desc">
                                <input [(ngModel)]="productivity.Date" class="input--style-5" id="input--style-5" type="date" name="date">                    
                                <label class="label--desc">date</label>
                            </div>
                        </div>

IntroducingLaborProductivity.ts

import { Component, OnInit, Input } from '@angular/core';
import { Time } from '@angular/common';
import { Router } from '@angular/router';
import { UserService } from 'src/app/shared/services/user.service';
import { Productivity } from 'src/app/shared/models/productivity';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-introducing-labor-productivity',
  templateUrl: './introducing-labor-productivity.component.html',
  styleUrls: ['./introducing-labor-productivity.component.css']
})
export class IntroducingLaborProductivityComponent implements OnInit {

productivity:Productivity;

  constructor(private router:Router,private userservice:UserService) { }

  ngOnInit() {
  }
  
 InsertProductivity(){
   this.userservice.InsertProductivity(this.productivity).subscribe(
     res=>{
       if(res)
       alert("succsful")
     },
     err=>(alert("faild"))
   )
    
 }
}

Productivity.ts (模型)

import { Time } from '@angular/common'

export class Productivity {
    ProductivyCode:number
    UserCode: number
    ProductivityNum: number
    Cmment:string
    Date:Date
    DurationOfPreparation:Time
    ProductivityStatus:number
}

user.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { User } from '../models/user.model';
import { Productivity } from '../models/productivity';
import { Time } from '@angular/common';
//import { read } from 'fs';



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

  url: string = "https://localhost:44387/api/User/";
  user: User;
  isLoggedIn: boolean;

  constructor(private http: HttpClient) { }

  InsertProductivity ( prod:Productivity) {
  return this.http.post(this.url + 'productivity',prod) ;
 }
}

Answer 1

最初this.productivity是未定义的，当试图访问成员日期时，它会引发一个错误，并打破它的绑定，以防止出现多个错误。

您需要给this.productivity一个初始值，如下所示

export class IntroducingLaborProductivityComponent implements OnInit {

productivity:Productivity = new Productivity();

.
.
.