Блог

Главная - Вопросы по программированию - Выпадающий список обновлений Angular

Выпадающий список обновлений Angular

#angular #typescript #angular7

#angular #typescript #angular7

Вопрос:

У меня есть выпадающий список (регион), который определяет, что должно быть показано в следующем (город)

Region.ts

     @Component({
  selector: 'app-region-dropdown',
  templateUrl: './region-dropdown.component.html',
  styleUrls: ['./region-dropdown.component.css'],
  providers: [RegionService, CityDropdownComponent]
})
export class RegionDropdownComponent implements OnInit {
  regions: Array<Region>;

  constructor(private regionsService: RegionService, private cityDropDown: CityDropdownComponent) { }

  ngOnInit() {
    this.regionsService.getAll().subscribe(data => {
      this.regions = data;
    });
  }

  public onChange(value):void {
    console.log(value);
    this.cityDropDown.loadList(value);
  }

}

City.ts

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

  cities: Array<City>;

  constructor(private regionsService: RegionService) { }

  ngOnInit() {

  }

  public loadList(regionId: number) {
    this.regionsService.getCities(regionId).subscribe(data => {
      console.log(data);
      this.cities = data;
    });
  }

}

city.html

 <mat-form-field>
  <mat-select placeholder="City">
    <mat-option *ngFor="let city of cities" >
      {{city.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

консоль показывает, что regionsService вернул список, но список городов так и не был обновлен

Комментарии:

1. Вы уверены, что возвращаемые данные относятся к городам, а не к региону?

2. CityDropdownComponent в поставщиках?

3. @GregoryMazur используйте общий сервис для передачи значения в функции onChange(). Используйте общую службу и тему.

4. Попробуйте сначала присвоить переменной cities значение пустого списка: cities: Array<string> = []; (в объявлении) Возможно, не может быть события onChange (), когда нет объекта.

5. Если вы создадите StackBlitz с проблемой, мы можем попытаться исправить это там. В вашем коде нет очевидной ошибки, но я вижу, что есть некоторые обсуждения о динамическом изменении mat-select в gihub, которые могут повлиять на вас.

Ответ №1:

Вероятно, мне нужно просмотреть весь ваш проект, чтобы выяснить, что не так, но я сделал нечто подобное в этом stackblitz:

https://stackblitz.com/edit/angular-7-master-wuuknx

Это работает.

Комментарии:

1. лол, это глупо, но я перенес код в regions-component, и он работает

2. кстати, вот мой пример, просто не знаю, что поставить вместо HttpClient, чтобы он мог работать локально stackblitz.com/edit/angular-ihgbpg

3. Хорошо, вам, вероятно, следует прочитать о взаимодействии с компонентами. У вас был странный DI компонента, который не имел смысла, и вам также необходимо передавать ввод / вывод компонентам, используя директивы ввода и вывода. Взгляните на этот вариант вашего решения: stackblitz.com/edit/angular-whzhuh