в раскрывающемся списке для обновления значений sh на основе выбранного значения в другом раскрывающемся списке в angular в отдельном компоненте

Question

У меня есть сценарий, который я дал ниже. Я использую последнюю версию angular 9 и node js

У меня есть дочерний компонент под названием «города», в котором есть выпадающий список с важными городами, такими как, например, Ченнай, Дели, Бангалор.

У меня есть еще один дочерний компонент, который называется «области» и содержит раскрывающийся список на основе выбранного города в другом раскрывающемся списке. Например, если я выберу «Бангалор», я бы хотел отобразить «Area1» и «Area2». Если я выберу «Ченнай», то я бы хотел отобразить «area3» и «area4».

Ниже приведен код компонента приложения

<app-city></app-city>
<app-area></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 { 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. Получить выбранное значение города в событии щелчка. Задача 2. Передать Cityid службе области для получения данных на основе cityId. Задача 3. Перезагрузить раскрывающийся список областей на основе недавний выбор.

Дайте мне знать, если есть лучший подход из приведенного выше кода и как исправить проблему.

Answer 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 решается следующим образом:

1. Использование ngModelChange для прослушивания изменений значения selectedCity.
2. У нас есть свойство selectCity с декоратором @ Output , который является EventEmitter, который испускает наш выбранный город.
3. Затем мы можем использовать привязку события для прослушивания этого события в нашем компоненте «app». Вы бы использовали функцию onSelectCity для отправки cityId в вашу региональную службу для получения ваших районов.

Проблема 3 решается с помощью декоратора @ Input , мы можем получить выбранный нами city ​​из нашего компонента "app" в наш компонент "hello". Вы получите список областей из родительского компонента в дочерний компонент.