Angular: bootstrap не может активировать опцию select, поскольку опции динамически связываются с помощью ngFor

Question

У меня есть список выбора, который динамически загружается в мой компонент, и к списку выбора применяется начальная загрузка, но изначально при запуске начальной загрузки он не находит никаких опций в select и, следовательно, не может применяться в списке выбора.

Я попробовал решение, представленное здесь Опции раскрывающегося списка начальной загрузки не загружаются когда-нибудь

, но не помогают.

Компонент HTML :

<div class="hero-image-bedrooms form-group">
    <select class="form-control" title="Bedrooms" id="selectbedroom">
        <option class="bs-title-option" value="">Select Bedroom</option>
       <option *ngFor="let keys of bedroommstkey" 
        value="{{bedroommst[keys].bedroomsid}}">{{bedroommst[keys].bedrooms}}</option> 
      </select>
</div>

Загрузка json :

[{"Bedroomid": "1", "Rooms": "Studio Apt"}, {"Bedroomid":" 2 "," спальни ":" 1 BHK "}, {" спальниid ":" 3 "," спальни ":" 2 BHK "}, {" Bedroomid ":" 4 "," спальни ":" 3BHK "}, {" Bedroomid ":" 5 "," спальни ":" 4 BHK "}, {" Bedroomid ":" 6 "," спальни ":" 5 BHK "}, {" Bedroomid ":" 7 ", "Спальни": "6 BHK"}, {"Bedroomid": "8", "Спальни": "7 BHK"}, {"Bedroomid": "9", "Спальни": "8 BHK"}, {"apartmentsid": "10", "спальни": "9 BHK"}]

Сгенерированный HTML :

<select _ngcontent-why-c1="" class="form-control bs-select-hidden" id="selectbedroom" title="Bedrooms">
<option _ngcontent-why-c1="" class="bs-title-option" value="" ng-reflect-     value="">Select Bedroom</option><!--bindings={
 "ng-reflect-ng-for-of": "0,1,2,3,4,5,6,7,8,9"
  }-->
 <option _ngcontent-why-c1="" value="1" ng-reflect-value="1">Studio    Apt</option>
 <option _ngcontent-why-c1="" value="2" ng-reflect-value="2">1 BHK</option>
 <option _ngcontent-why-c1="" value="3" ng-reflect-value="3">2 BHK</option>
 <option _ngcontent-why-c1="" value="4" ng-reflect-value="4">3 BHK</option>
 <option _ngcontent-why-c1="" value="5" ng-reflect-value="5">4 BHK</option>
 <option _ngcontent-why-c1="" value="6" ng-reflect-value="6">5 BHK</option>
 <option _ngcontent-why-c1="" value="7" ng-reflect-value="7">6 BHK</option>
 <option _ngcontent-why-c1="" value="8" ng-reflect-value="8">7 BHK</option>
 <option _ngcontent-why-c1="" value="9" ng-reflect-value="9">8 BHK</option>
 <option _ngcontent-why-c1="" value="10" ng-reflect-value="10">9 BHK</option>
 </select>
 <div class="btn-group bootstrap-select form-control open">
 <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" data-id="selectbedroom" title="Select Bedroom" aria-expanded="true">
 <span class="filter-option pull-left">Select Bedroom</span>&nbsp;<span class="caret">
 </span>
 </button>
 <div class="dropdown-backdrop"></div>
 <div class="dropdown-menu open" style="max-height: 139.917px; overflow: hidden; min-height: 0px;">
 <ul class="dropdown-menu inner" role="menu" style="max-height: 137.917px; overflow-y: auto; min-height: 0px;">       
  </ul>
  </div>
  </div>

Как в сгенерированном Html-файлеВ сгенерированном li нет динамических элементов, перечисленных в опциях выбора.

Пожалуйста, помогите с соответствующим ответом

Answer 1

проблема была <option *ngFor="let keys of bedroommstkey" value="{{bedroommst[keys].bedroomsid}}">{{bedroommst[keys].bedrooms}}</option>

должен (учитывая, что вы, вероятно, получаете этот json из службы); <option *ngFor="let keys of bedroommstkey" value="{{keys?.bedroomsid}}">{{keys?.bedrooms}}</option>

релевантно HTML :

<div class="hero-image-bedrooms form-group">
  <div *ngIf="bedroommstkey.length>0">
    <select class="form-control" title="Bedrooms" id="selectbedroom">
        <option class="bs-title-option" value="">Select Bedroom</option>
       <option *ngFor="let keys of bedroommstkey" 
        value="{{keys?.bedroomsid}}">{{keys?.bedrooms}}</option> 
      </select>
  </div>
</div>

релевантно TS :

  bedroommstkey = [ { "bedroomsid": "1", "bedrooms": "Studio Apt" }, { "bedroomsid": "2", "bedrooms": "1 BHK" }, { "bedroomsid": "3", "bedrooms": "2 BHK" }, { "bedroomsid": "4", "bedrooms": "3 BHK" }, { "bedroomsid": "5", "bedrooms": "4 BHK" }, { "bedroomsid": "6", "bedrooms": "5 BHK" }, { "bedroomsid": "7", "bedrooms": "6 BHK" }, { "bedroomsid": "8", "bedrooms": "7 BHK" }, { "bedroomsid": "9", "bedrooms": "8 BHK" }, { "bedroomsid": "10", "bedrooms": "9 BHK" } ];

простая демонстрация стекаблиц