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

Posted 2023-02-22

【中文标题】下拉以根据单个组件中另一个下拉列表中的选定值刷新值

【英文标题】：drop down to refresh values based on the selected value in another drop down in angular in individual component

【发布时间】：2020-08-16 18:11:57

【问题描述】：

我有一个场景，我在下面给出。我正在使用最新版本的 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;

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

<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. 根据最近的选择重新加载区域的下拉列表。

如果上面的代码有更好的方法以及如何解决问题，请告诉我。

【问题讨论】：

你能用你写的代码创建一个stackblitz实例吗？

使用事件发射器获取所选城市并将其作为输入传递给第二个组件。您可以使用 ngOnchanges 来更新列表。

我可以使用 ngOnchanges 来实现吗

【参考方案1】：

你有两个组件

@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;

你有一个“app”组件来渲染你的两个组件

@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，用于发射我们选择的城市。 然后我们可以使用事件绑定在我们的“应用程序”中监听这个事件 零件。您将使用 onSelectCity 函数发送 cityId 到您的区域服务以检索您的区域。

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

【讨论】：

c-sharpcorner.com/forums/… 。这篇文章表明 ngmodel 已被弃用。我正在使用角度最新版本。我不确定是否有更好的方法

@jaiangular 对于reactive forms 已弃用。我们使用two-way-binding 来保持我们的价值和观点同步。