Блог

У меня есть форма, управляемая шаблоном, и некоторые значения по умолчанию, инициализированные для — selectedHotel, nrooms (количество комнат), ndays (количество дней). Когда я запускаю этот код после удаления тега формы, значения по умолчанию отображаются, как и ожидалось, но когда я добавил тег формы, выпадающий список, дни, номера и т. Д. Все оказываются пустыми

 <form #myform="ngForm">
  
    <div class="sec3">
      <h3>Name</h3>
      <select (change)="onSelect($any($event.target).value)">
          <option *ngFor="let hotel of hotels" [value]="hotel.name">
          {{hotel.name}}
        </option>
      </select> 
      <p>Address:</p> 
      <p>{{selectedHotel.addr}}</p>
    </div>

    
    <div class="sec4">
        <h3>Rooms</h3>
        <input type="number" [class.is-invalid]="rooms.invalid" [(ngModel)]="nrooms" #rooms="ngModel" required>
        <br><small *ngIf="rooms.invalid amp;amp; rooms.touched">Please enter valid number of rooms</small>
        <p>Available:</p>
        <p>{{selectedHotel.rooms}}</p>
    </div>

    <div class="sec5">
      <h3>Days</h3>
      <input type="text" #days="ngModel" [(ngModel)]="ndays" [class.is-invalid]="days.invalid" required>
      <p>Room Price:</p>
      <p>{{selectedHotel.rmprice|currency:'INR'}}</p>
    </div>

    <div class="sec6">
        <h3>Total: </h3>
        <h3> {{nrooms*ndays*selectedHotel.rmprice|currency:'INR'}}</h3>
        <button class="btn" (click)="onBook()">Book</button>
    </div>
  </form>
 

Это соответствующий файл ts

 import { Component, OnInit } from '@angular/core';
import{Booking} from 'src/app/models/booking';
import {Hotel} from 'src/app/models/hotel';
@Component({
  selector: 'app-hotel',
  templateUrl: './hotel.component.html',
  styleUrls: ['./hotel.component.css']
})
export class HotelComponent implements OnInit {

  hotels:Hotel[]=[
    {name:'Express Inn',addr:'Prashant Nagar, Pathardi Phata, Nashik',rmprice:1000,rooms:100},
    {name:'Emerald Park',addr:'Holaram Colony, Sharanpur, Nashik',rmprice:2000,rooms:50}

  ]

  bookings:Booking[]=[];

  display;

  selectedHotel:Hotel;
  nrooms:number;
  ndays:number;
  id_cnt;

  constructor() {
    this.nrooms=1;
    this.ndays=1;
    this.display=true;
    this.id_cnt=0;
    this.selectedHotel=this.hotels[0];
  }

  ngOnInit(): void {
  }


  onSelect(name:string)
  {
    for (var i = 0; i < this.hotels.length; i  ) {
      if (this.hotels[i].name == name) {
        this.selectedHotel = this.hotels[i];
      }

    }
  }


  onBook()
  {
    for (var i = 0; i < this.hotels.length; i  ) {
      if (this.hotels[i].name == this.selectedHotel.name) {
         this.selectedHotel.rooms-=this.nrooms;
      }

    }

    this.id_cnt  ;

    this.bookings.push(
      
        {
          id:this.id_cnt,
          name:this.selectedHotel.name,
          price:this.nrooms*this.ndays*this.selectedHotel.rmprice
        }
      
    )

    this.nrooms=0;
    this.ndays=0;

    
    
  }

  toggleDisplay()
  {
    this.display=!this.display;
  }




}