时间戳

首页 > 解决方案 > Angular：引导程序无法触发选择选项，因为选项是使用 ngFor 动态绑定的

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

问题描述

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

我尝试了此处提供的解决方案 bootstrap-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：

[ {“卧室”：“1”，“卧室”：“Studio Apt”}，{“卧室”：“2”，“卧室”：“1 BHK”}，{“卧室”：“3”，“卧室” ": "2 BHK" }, { "bedroomsid": "4", "bedrooms": "3 BHK" }, { "bedroomsid": "5", "bedrooms": "4 BHK" }, { "bedroomsid" ：“6”，“卧室”：“5 BHK”}，{“卧室”：“7”，“卧室”：“6 BHK”}，{“卧室”：“8”，“卧室”：“7 BHK" }, { "bedroomsid": "9", "bedrooms": "8 BHK" }, { "bedroomsid": "10", "bedrooms": "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 没有选择选项中列出的动态项。

请帮忙给个合适的答案

标签： cssangulartypescriptbootstrap-4angular7

解决方案

问题是 <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 演示

推荐阅读