Bootstrap/Angular 下拉菜单在 IE11 中不工作

Question

这是一个简单的下拉菜单，但在 IE11 中您看不到所选择的菜单项。您知道任何解决方法吗？

<div class="form-group program-container">
  <select class="form-control  container-fluid" (change)="onChooseMenuItem($event)" [(ngModel)]="ngrxActiveMenuItem">
    <option class="selected-class" selected disabled>{{ngrxActiveMenuItem}}</option>
    <option *ngFor="let menuItem of ngrxMenuItems, let i = index"
            value={{i}}>
      {{menuItem.programName}}
    </option>
  </select>
</div>

这是顶级组件：

<div class="container home-container">
  <div class="row mb-3">
    <div class="col-sm-6 mb-2">
      <div class="card border-left-primary shadow-sm py-2 h-100">
        <div class="card-body pt-2 pb-2">
          <div class="row no-gutters align-items-center">
            <div class="col-sm-6 text-xs font-weight-bold text-primary text-uppercase mb-1">
              Programs:
            </div>
            <div class="col-sm-6 mt-3">
              <app-program-dropdown></app-program-dropdown>
            </div>
          </div>
        </div>
      </div>
    </div>

Answer 1

您的项目文件夹中会有一个文件浏览器列表。您可以尝试在其中添加IE11。

Answer 2

尝试添加 [selected] 而不是您所拥有的：

<select>
  <option *ngFor="let menuItem of ngrxMenuItems, let i = index"
        value={{I}} [selected]="menuItem.programName == ngrxActiveMenuItem">
  {{menuItem.programName}}
  </option>
</select>

Bootstrap/Angular 下拉菜单在 IE11 中不工作

Bootstrap/Angular dropdown not working in IE11

internet-explorer-11

bootstrap-4

angular