Angular：引导程序无法触发选择选项，因为选项是使用 ngFor 动态绑定的

Posted 2023-03-13

【中文标题】Angular：引导程序无法触发选择选项，因为选项是使用 ngFor 动态绑定的

【英文标题】：Angular: bootstrap fails to trigger select option as options are dynamically binded using ngFor

【发布时间】：2019-11-06 10:34:25

【问题描述】：

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

我尝试了此处提供的解决方案 bootstrap-select dropdown options not getting loaded sometime

但无济于事。

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

[ “卧室”：“1”， “卧室”：“工作室公寓” , “卧室”：“2”， “卧室”：“1 BHK” , “卧室”：“3”， “卧室”：“2 BHK” , “卧室”：“4”， “卧室”：“3 BHK” , “卧室”：“5”， “卧室”：“4 BHK” , “卧室”：“6”， “卧室”：“5 BHK” , “卧室”：“7”， “卧室”：“6 BHK” , “卧室”：“8”， “卧室”：“7 BHK” , “卧室”：“9”， “卧室”：“8 BHK” , “卧室”：“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 一样，生成的 ul li 没有选择选项中列出的动态项。

请帮忙给个合适的答案

【参考方案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"  ];

简单的stackblitz demo