angular - Angular 模板驱动的表单不显示默认值

Question

我有模板驱动的表单和一些默认值初始化 - 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 && 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;
  }




}

标签： angularformsfrontend