Css 角度：引导无法触发选择选项，因为选项是使用ngFor动态绑定的

我有一个动态加载到组件中的选择列表，选择列表应用了引导，但最初在引导运行时，它在选择中找不到任何选项，因此无法应用于选择列表

我尝试了这里提供的解决方案

但毫无帮助

组件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>

<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>

<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>

  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" } ];

选择卧室
{{卧室MST[钥匙].卧室}

正在加载json

<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>

<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>

<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>

  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" } ];

[ { “卧室SID”：“1”， “卧室”：“工作室公寓” }, { “卧室SID”：“2”， “卧室”：“1 BHK” }, { “卧室SID”：“3”， “卧室”：“2 BHK” }, { “卧室SID”：“4”， “卧室”：“3 BHK” }, { “卧室SID”：“5”， “卧室”：“4 BHK” }, { “卧室SID”：“6”， “卧室”：“5 BHK” }, { “卧室SID”：“7”， “卧室”：“6 BHK” }, { “卧室SID”：“8”， “卧室”：“7 BHK” }, { “卧室SID”：“9”， “卧室”：“8 BHK” }, { “卧室SID”：“10”， “卧室”：“9 BHK” } ]

生成的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>

<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>

<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>

  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" } ];

选择卧室
工作室公寓
1 BHK
2 BHK
3 BHK
4 BHK
5 BHK
6 BHK
7 BHK
8 BHK
9 BHK
选择卧室

与生成的Html一样，生成的ul li没有在选择选项中列出动态项

---

请提供适当的答案

问题已解决

{{beddroommst[keys].beddrooms}

应该是（请注意，您可能是从服务中获得此json）；

{{keys？.beddrooms}}

相关的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>

<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>

<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>

  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" } ];

简单的