首页 文章

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

提问于
浏览 次
1

我试图从component.html向component.ts发送'Date'类型数据类型，进一步将其发送到服务 .

但是，我不知道为什么我得到上面的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;

}
angular typescript

2 回答

  • 0

    您的 RoomsService 的 userSelection 成员未定义 . 您可能希望将其初始化为 Room 的默认实例 .

    回复于
  • 0

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

    在 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 时，才会显示您的部分 .

    回复于

相关问题