引导程序 4：在选择第一个引导程序选择时更新第二个引导程序选择的值

Question

我有两个选择字段。我想知道如何根据第一个选择器的选择来更新第二个选择器的值。

到目前为止，这是我的想法： 表单html：

  <form [formGroup]="angForm" class="form-element">


        <div class="input-group mb-3 form-element_city">
          <select class="custom-select" id="inputGroupSelect01" #cityName>
            <option selected *ngFor="let city of cities" [ngValue]="city.cityName">{{city.cityName}}</option>

          </select>
        </div>
        <div class="input-group mb-3 form-element_hotel">
          <select class="custom-select" id="inputGroupSelect01" #hotelName>
            <option selected *ngFor="let hotel of hotels" [ngValue]="hotel.hotelName">{{hotel.hotelName}}</option>

          </select>
        </div>
        <div class="form-group">
          <button type="submit" (click)="addReview(date, email.value, cityName.value , hotelName.value)" class="btn btn-primary btn-block form-element_btn"
            [disabled]="!validEmail">Book</button>
        </div>

    </form>

这里是包含城市和酒店的 JSON 文件

  cities = [
        {
          'cityName': 'Berlin',
        },
        {
          'cityName': 'Oslo',

        }
      ];
      hotels = [
        {
          'cityName': 'oslo',
          'hotelName': 'Sheraton Hotel',

        },
        {
          'cityName': 'Berlin',
          'hotelName': 'grand hotel',

        }
      ];

有人可以帮忙吗？

Answer 1

Solution

HTML：

<form [formGroup]="angForm" class="form-element">
    <div class="input-group mb-3 form-element_city">
        <select class="custom-select" id="inputGroupSelect01" #cityName (change)="changeSelect(cityName.value)" formControlName='city'>
            <option selected *ngFor="let city of cities" [ngValue]="city.cityName">{{city.cityName}}</option>

          </select>
    </div>
    <div class="input-group mb-3 form-element_hotel">
        <select class="custom-select" id="inputGroupSelect01" #hotelName formControlName='hotel'>
            <option selected *ngFor="let hotel of hotels" [ngValue]="hotel.hotelName">{{hotel.hotelName}}</option>

          </select>
    </div>
</form>

TS：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  angForm: FormGroup;
  cities = [
    {
      cityName: 'Berlin',
    },
    {
      cityName: 'oslo',

    }
  ];

  hotels: Array<any> = [
    {
      cityName: 'oslo',
      hotelName: 'Sheraton Hotel',

    },
    {
      cityName: 'Berlin',
      hotelName: 'grand hotel',

    }
  ];

  constructor(private fb: FormBuilder) {

  }

  ngOnInit() {
    this.createForm();

  }

  createForm() {
    this.angForm = this.fb.group({
      city: this.cities[0].cityName,
      hotel: this.hotels[0].hotelName

    })
  }

  changeSelect(event) {
    let ret = this.hotels.find(data => data.cityName.toString() === event.split(': ')[1].toString());
    this.angForm.get('hotel').setValue(ret.hotelName);
  }

}

Answer 2

请按照我在您的代码中所做的以下更改
HTML 代码

<form [formGroup]="angForm" class="form-element">
        <div class="input-group mb-3 form-element_city">
          <select class="custom-select" id="inputGroupSelect01" #cityName (change)="changeFun(cityName.value)" formControlName='city'>
            <option selected *ngFor="let city of cities" [ngValue]="city.cityName">{{city.cityName}}</option>

          </select>
        </div>
        <div class="input-group mb-3 form-element_hotel">
          <select class="custom-select" id="inputGroupSelect01" #hotelName formControlName='hotel'>
            <option selected *ngFor="let hotel of hotels" [ngValue]="hotel.hotelName">{{hotel.hotelName}}</option>

          </select>
        </div>
        <div class="form-group">
          <button type="submit" (click)="addReview(date, email.value, cityName.value , hotelName.value)" class="btn btn-primary btn-block form-element_btn"
            [disabled]="!validEmail">Book</button>
        </div>

  </form>

在您的 .ts 文件中写入以下函数

changeFun(value) {
  const temp = this.hotels.find(k => k.cityName === value);
  const current_hotel = temp.hotelName;
  setTimeout(() => {
              this.angForm.controls['hotel'].setValue(current_hotel);
            }, 0);
  }

你可以使用 Reactiveforms 来做同样的事情