Как повторить данные, используя ngFor в раскрывающемся меню с множественным выбором углов?

Question

Я работаю над угловым проектом. У меня есть требование отображать раскрывающийся список с опцией multi-select. Я использовал для этой цели выпадающий список с множественным выбором. Он отлично работает для статических данных. Когда я использую массив и повторяю массив используя ngFor, выпадающий список не работает. Вот мой код:

public citiesArray=["bangalore","chennai"];
  $(document).ready(function() {
      $('#city').multiselect({
      enableClickableOptGroups: true,
      enableCollapsibleOptGroups: true
  });

  <div class="col-sm-3">
                    <select id="city">
                      <option>Select City</option>
                        <option *ngFor="let city of citiesArray" [value]="city">{{city}}</option>
                        <!-- <option value="Bangalore">Bangalore</option>
                        <option value="Hyderabad">Hyderabad</option>
                        <option value="Chennai">Chennai</option> -->
                    </select>  
            </div>

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

Answer 1

Попробуйте использовать ngAfterViewInit вместо готового документа

public citiesArray = ["bangalore", "chennai"];

ngAfterViewInit() {
  $('#city').multiselect({
    enableClickableOptGroups: true,
    enableCollapsibleOptGroups: true
  })
}