Блог

Я новичок в angular. Я хочу создать форму, которая принимает пользовательский ввод следующим образом. . Для этой цели я создал класс со следующими переменными

 export class Hotels {    name: string;  email: string;  address1: string;  address2: string;  bookingList: Contract[]; }  

Контракт-это еще один класс модели со своими соответствующими атрибутами.

 export class Contract {  start_date: string;  end_date: string;   }  

HTML-форма интерфейса выглядит следующим образом,

 lt;form (ngSubmit) = "saveHotel()"gt;   lt;input type="text" name = "name" [(ngModel)]=" hotel.name" placeholder="Enter hotel name"/gt;  lt;input type="text" name = "email" [(ngModel)]=" hotel.email" placeholder="Enter hotel email"/gt;  lt;input type="text" name = "address1" [(ngModel)]=" hotel.address1" placeholder="Enter hotel address line 1"/gt;  lt;input type="text" name = "address2" [(ngModel)]=" hotel.address2" placeholder="Enter hotel address line 2"/gt;  lt;input type="text" name = "address2" [(ngModel)]=" hotel.bookingList.start_date" placeholder="Enter hotel address line 2"/gt;  lt;input type="text" name = "address2" [(ngModel)]=" hotel.bookingList.end_date" placeholder="Enter hotel address line 2"/gt;   lt;button type="submit"gt;Add Hotellt;/buttongt; lt;/formgt;  

Однако это не увенчалось успехом, как показано ниже, ошибка

Файл компонента

 import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { Hotels } from 'src/app/models/hotels'; import { HotelsService } from 'src/app/services/hotels.service';  @Component({  selector: 'app-add-hotels',  templateUrl: './add-hotels.component.html',  styleUrls: ['./add-hotels.component.css'] }) export class AddHotelsComponent implements OnInit {  hotel : Hotels = new Hotels();  constructor(private _hotelService : HotelsService,  private _router:Router) { }   ngOnInit(): void {  }   saveHotel(){  this._hotelService.saveHotels(this.hotel).subscribe(  data =gt;{  console.log('response', data)  this._router.navigateByUrl("/hotels");//to navigate back to main hotels pahge  }  )  } }  

Файл служб

 import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core';  import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; import { Hotels } from '../models/hotels';  @Injectable({  providedIn: 'root' }) export class HotelsService {   //to store http endpoint  private getUrl: string = "http://localhost:8080/get/hotels";   private postUrl: string = "http://localhost:8080/savehotel";  constructor(private _httpClient:HttpClient) { }   getHotels(): Observablelt;Hotels[]gt;{  return this._httpClient.getlt;Hotels[]gt;(this.getUrl).pipe(  map(response =gt; response)  )  }   saveHotels(hotels: Hotels): Observablelt;Hotelsgt; {  return this._httpClient.postlt;Hotelsgt;(this.postUrl, hotels);//no need to map as we just have to return the posted value back to component  } }  

В классе отелей список бронирования представляет собой массив, поэтому вы не можете получить к нему доступ, как

отель.список бронирования.дата окончания

Вы должны пройти по массиву списков бронирования и получить доступ к end_date.

 lt;  form (ngSubmit) = "saveHotel()"gt;    lt;input type="text" name = "name" [(ngModel)]=" hotel.name" placeholder="Enter hotel name"/gt;  lt;input type="text" name = "email" [(ngModel)]=" hotel.email" placeholder="Enter hotel email"/gt;  lt;input type="text" name = "address1" [(ngModel)]=" hotel.address1" placeholder="Enter hotel address line 1"/gt;  lt;input type="text" name = "address2" [(ngModel)]=" hotel.address2" placeholder="Enter hotel address line 2"/gt;  lt;span *ngFor="let booking of hotel.bookingList"gt;  lt;input type="text" name = "address2" [(ngModel)]=" booking.start_date" placeholder="Enter hotel address line 2"/gt;  lt;input type="text" name = "address2" [(ngModel)]=" booking.end_date" placeholder="Enter hotel address line 2"/gt;  lt;/spangt;    lt;button type="submit"gt;Add Hotellt;/buttongt; lt;/formgt;  

Если вы хотите динамически добавлять бронирование в отель. У вас может быть отдельная кнопка для добавления бронирования в массив hotel.bookingList.

 lt;button type="submit" (click)="addHotelBooking()"gt;Resetlt;/buttongt;   addHotelBooking = () =gt; {  this.hotel.bookingList.push({  start_date: null,  end_date: null   }) }