Angular: попытка получить объект из массива по индексу, но я получил неопределенную ошибку

Когда страница загружается, она получает страны из моего API для отдыха, а когда пользователь выбирает страну, он загружает города для страны. Пока это работает нормально, но когда страница открыта, город пуст, потому что он получает города только тогда, когда пользователь хотя бы один раз выбирает страну (событие (изменение)).

Чтобы избежать этого, я хочу получить первый элемент из стран [] и загрузить города с идентификатором страны в ngInit.

Но это всегда не определено, если я хочу получить элемент из массива стран. Я пробовал несколько способов, но я не могу заставить его работать.

Модель страны:


export interface Country{
    id: number;
    name: string;
}

Компонент.ts:

countries: Country[] = [];
  cities : City[] = [];
  
  loading: boolean = false;
  errorMessage: string | undefined;


  constructor(
    private countryService: CountryServiceService,
    private cityService: CityService) { 

    }

  ngOnInit(): void {
    this.getCountries(); 
    console.log(this.countries[0]);

  }

получитьстраны()

   public getCountries(){
    this.countryService.getCountries().subscribe( response => {
      this.countries = response;
     }
    )
   }

HTML:

<select (change)="getCities($event)">
            <option *ngFor="let country of countries"
             [value]="country.id">
             {{country.name}}
            </option>
        </select>

        <select>
            <option *ngFor="let city of cities"
            [value]="city.id">
            {{city.name}}
          </select>
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
0
0
30
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Есть много способов сделать это. но по-вашему, что хотите. вы можете попробовать ниже.

и я верю, что у вас есть getCities(countryId:number) метод. так что просто сделай это.

public getCountries(){
    this.countryService.getCountries().subscribe( response => {
      this.countries = response;
      this.fillCities(this.countries[0].id);
     }
    
   }

fillCities(id:number){
    this.cityService.getCities(id).subscribe( response => {
     this.cities=response;
     }
}

вам нужно обрабатывать проверки/проверки типов. Вышеприведенный код прямо соответствует вашему требованию.

Благодарю вас! Это работает.

mgyrb 22.04.2022 22:38

Другие вопросы по теме