angular - 下拉以根据单个组件中另一个下拉列表中的选定值刷新值

问题描述

我有一个场景，我在下面给出。我正在使用最新版本的 angular 9 和 node js

我有一个名为“城市”的子组件，其中包含一个下拉菜单，其中包含一些重要的城市，例如钦奈、德里、班加罗尔。

我有另一个名为“区域”的子组件，其中包含一个基于另一个下拉列表中所选城市的下拉列表。例如，如果我选择“Bangalore”，我想显示“area1”和“area2”。如果我选择“Chennai”，那么我想显示“area3”和“area4”。

下面是app-component的代码

<app-city></app-city>
<app-area></app-area>

下面是app-city（模板）的代码

<label>City: </label>
  <select (change)="onCityClick()">
    <option value="0">--All--</option>
    <option *ngFor="let city Of cities" value={{city.cityId}}>
      {{city.cityName}}
    </option>
  </select>

下面是城市组件的代码

import { Component, OnInit } from '@angular/core';
import { city } from './city';
import { CityService } from './city.service';

@Component({
  selector: 'app-city',
  templateUrl: './city.component.html',
  styleUrls: ['./city.component.css']
})
export class CityComponent implements OnInit {

  cities : Array<city> = [];
  constructor(private cityService : CityService ) { }

  ngOnInit(): void {
    this.cities = this.cityService.getCities();
  }

  onCityClick(){
    console.log('need to get the city id here');
  }
}

下面是城市服务的代码

import { Injectable } from '@angular/core';
import { city } from './city'


@Injectable({
    providedIn: 'root'
  })
  export class CityService {

    constructor() { }

    getCities()  {

      let cities : Array<city> = [];

            // sample json data which retuns a collection of cities from service
            const objcity = new city();
            objcity.cityId = 1;
            objcity.cityName = 'bangalore';
            cities.push(objcity);

            const objcity1 = new city();
            objcity1.cityId = 2;
            objcity1.cityName = 'chennai';
            cities.push(objcity1);



      return cities;
    }
  }

下面是城市对象

export class city{
    cityId: number;
    cityName: string;
}

以下是应用程序区域（模板）的代码

<label>City: </label>
  <select (change)="onCityClick()">
    <option value="0">--All--</option>
    <option *ngFor="let city Of cities" value={{city.cityId}}>
      {{city.cityName}}
    </option>
  </select>

下面是区域的代码 - 组件

import { Component, OnInit } from '@angular/core';
import { AreaService } from './area.service';
import { area } from './area';

@Component({
  selector: 'app-area',
  templateUrl: './area.component.html',
  styleUrls: ['./area.component.css']
})
export class AreaComponent implements OnInit {

  areas : Array<area> = [];
  constructor(private  areaService: AreaService) { }

  ngOnInit(): void {
    this.areas =  this.areaService.getAreas(1);
  }

  onAreaClick(){
    console.log('-- need to get the area id here ');
  }
}

下面是区域服务的代码

import { Injectable } from '@angular/core';
import { area } from './area'


@Injectable({
    providedIn: 'root'
  })
  export class AreaService {

    constructor() { }

    getAreas(cityId : number)  {

      let areas : Array<area> = [];
      // @ts-ignore


            // sample json data which retuns a collection of areas based on the cityId from service
            const objarea = new area();
            objarea.areaId = 1;
            objarea.areaName = 'areaa1';
            areas.push(objarea);

            const objarea1 = new area();
            objarea1.areaId = 2;
            objarea1.areaName = 'area2';
            areas.push(objarea1);

      return areas;
    }
  }

下面是区域类别

export class area{
    areaId: number;
    areaName: string
}

问题 1. 在点击事件上获取城市的 Selected 值问题 2. 将 Cityid 传递给区域服务以根据 cityId 获取数据问题 3. 根据最近的选择重新加载区域的下拉列表。

让我知道上述代码是否有更好的方法以及如何解决该问题。

标签： angular

解决方案

你有你的两个组件

@Component({
  selector: "city-select",
  template: `
    <label for="cars">Choose a city:</label>

    <select
      id="cars"
      [(ngModel)]="selectedCity"
      (ngModelChange)="onCityChange()"
    >
      <option value="">Please select</option>
      <option value="Delhi">Delhi</option>
      <option value="Lahore">Lahore</option>
      <option value="Mumbai">Mumbai</option>
    </select>
  `
})
export class CitySelectComponent {
  @Output() selectCity: EventEmitter<string> = new EventEmitter<string>();

  private selectedCity = "";

  private onCityChange() {
    this.selectCity.emit(this.selectedCity);
  }
}

和

@Component({
  selector: 'hello',
  template: `<h1>Hello Angular!</h1><p>Welcome to {{city}}.</p>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() city: string;
}

您有一个“应用程序”组件，它呈现您的两个组件

@Component({
  selector: "my-app",
  template: `
    <hello [city]="cityName"></hello>
    <city-select (selectCity)="onSelectCity($event)"></city-select>
  `
})
export class AppComponent {
  public cityName = "";

  public onSelectCity(city: string) {
    this.cityName = city;
  }
}

问题 1 通过使用ngModel的双向绑定来解决。

问题 2 通过以下方式解决：

使用 ngModelChange 监听 selectedCity 值的变化。
我们有一个名为 selectCity 的属性，带有@Output 装饰器，它是一个发射我们选择的城市的 EventEmitter。
然后我们可以使用事件绑定在我们的“app”组件中监听这个事件。您将使用 onSelectCity 函数将 cityId 发送到您的区域服务以检索您的区域。

问题 3 通过使用@Input装饰器来解决，我们可以将我们选择的城市从我们的“app”组件接收到我们的“hello”组件中。您将从父组件中获取区域列表到您的子组件中。

angular - 下拉以根据单个组件中另一个下拉列表中的选定值刷新值

问题描述

解决方案

推荐阅读