Question

我花了将近3周的时间使用Angular 5并且对Web开发还是一个新手。我正在尝试将component.html中的' Date '类型数据类型发送到component.ts，然后将其发送到服务。

但是，我不知道为什么我得到上述error (screenshot)因为我在另一个组件中做了完全相同的事情，它仍然可以正常工作。这可能是一个新手的错误，但经过无数次的搜索，大多数解决方案要么不符合我的问题，要么超出了我的理解水平。

rooms.component.ts

import { Component, OnInit } from '@angular/core';
import { DatepickerOptions } from 'ng2-datepicker';
import { NgModule } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Room } from './room.model';
import { RoomsService } from './rooms.service';

@Component({
  selector: 'app-rooms',
  templateUrl: './rooms.component.html',
  styleUrls: ['./rooms.component.css'],
  providers:[RoomsService]
})

export class RoomsComponent implements OnInit {

  constructor(private roomService: RoomsService) {
   }

  ngOnInit() {  
  }

  onSubmit(form: NgForm)
  {
    console.log(form.value);
  }    
}

rooms.component.html

<form #roomForm="ngForm" (ngSubmit)="onSubmit(roomForm)">    
  <div  class="form-row">    
    <div class="form-group col-md-6">
      <input type="date" class="form-control" name="StartDate" #StartDate="ngModel" [(ngModel)]="roomService.userSelection.StartDate" placeholder="Start Date" required> 
    </div>

    <div class="form-group col-md-6">
        <input type="date" class="form-control" name="EndDate" #EndDate="ngModel" [(ngModel)]="roomService.userSelection.EndDate" placeholder="End Date" required> 
    </div>
  </div>

  <div class="form-row">    
      <div class="form-group col-md-8">
        <button type="submit" class="btn btn-lg btn-block btn-info"><i class="fa fa-floppy-o" aria-hidden="true"></i> Submit</button> 
      </div>     
  </div>   
</form>

rooms.service.ts

import { Injectable } from '@angular/core';
import { Room } from './room.model';
import { Http, Response, Headers, RequestOptions, RequestMethod } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http';



@Injectable()
export class RoomsService {

  userSelection:Room;
  roomList: Room[];      

  constructor(private http: Http) {       
   }

  getRoomList(StartDate, EndDate){
    this.http.get('http://localhost:17518/api/RoomPriceAndStatus')
    .map((data: Response)=>{
      return data.json() as Room[];
    }).toPromise().then(x =>{
      this.roomList = x;
    })
  }
}

room.model.ts

export class Room{
    Id: number;
    StartDate: Date;
    EndDate: Date;

}

Answer 1

userSelection的{{1}}成员未定义。您可能希望将其初始化为RoomsService的默认实例。

Answer 2

屏幕截图本身解释了代码失败的位置。

在rooms.component.html模板中，您绑定[(ngModel)]="roomService.userSelection.StartDate"。

检查并确保userSelection对象获得正确的值。最终StartDate坐在那里。 userSelection必须undefined，这就是您收到此错误的原因。

尝试设置条件*ngIf，您就可以看到它。

<div class="form-group col-md-6" *ngIf="roomService.userSelection">

仅当roomService.userSelection对象具有某个值/不是undefined时，才会显示您的部分。

（Angular）TypeError：无法读取未定义的属性“StartDate”

2 个答案: