如何在 bootstrap 4 中显示选中的选项？

Question

我想 select 从下拉列表中选择一个选项，当我单击其中一个选项时，它始终会在顶部显示英文选项。我希望 selected 语言在 selected 时位于顶部。

**这是我的代码**

    <ul class="navbar-nav align-items-lg-center ml-lg-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <img src="../assets/img/flags/uk.png" class="rds__flag-lang pr-2">English
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" [routerLink]="['kh','home']"><img src="../assets/img/flags/kh.png" class="rds__flag-lang pr-2">Khmer</a>
          <a class="dropdown-item" [routerLink]="['cn','home']"><img src="../assets/img/flags/ch.png" class="rds__flag-lang pr-2">China</a>
          <a class="dropdown-item" [routerLink]="['en','home']"><img src="../assets/img/flags/uk.png" class="rds__flag-lang pr-2">English</a>
        </div>
      </li>
    </ul>

Answer 1

您可以绑定点击事件并在点击时调用函数，然后将所选项目值存储在变量中并在您的 html 模板文件中使用该变量

<ul class="navbar-nav align-items-lg-center ml-lg-auto">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <img src="../assets/img/flags/uk.png" class="rds__flag-lang pr-2"> {{selectedItem}}
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a class="dropdown-item" [routerLink]="['kh','home']" (click)="onChangeLang('Khmer')"><img src="../assets/img/flags/kh.png" class="rds__flag-lang pr-2">Khmer</a>
              <a class="dropdown-item" [routerLink]="['cn','home']" (click)="onChangeLang('China')"><img src="../assets/img/flags/ch.png" class="rds__flag-lang pr-2">China</a>
              <a class="dropdown-item" [routerLink]="['en','home']" (click)="onChangeLang('English')"><img src="../assets/img/flags/uk.png" class="rds__flag-lang pr-2">English</a>
            </div>
          </li>
        </ul>

在 ts class 文件

selectedItem: string;

onChangeLang(selectedItem: string) {
    this.selectedItem = selectedItem;
}

您可以参考 angular 文档 https://angular.io/guide/user-input

https://angular.io/guide/template-syntax

Answer 2

创建一个 select 选项数组，然后使用 NgFor

，这是最聪明的方法

这里是.ts代码

 selectOptions = [{lang:'Khmer', flag:'kh.png', route:'kh'},
                  {lang:'China', flag:'ch.png', route:'ch'},
                  {lang:'English', flag:'uk.png', flag:'uk'}];

 selectedOption: string;

 onChangeLang(selectedOption: string) {
    this.selectedOption= selectedOption;
 }

和模板部分

  <ul class="navbar-nav align-items-lg-center ml-lg-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <img src="../assets/img/flags/{selectedOption.flag}" class="rds__flag-lang pr-2"> {{selectedOption.lang}}
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a *ngFor="let option of selectOptions" 
             class="dropdown-item" 
            [routerLink]="[option.route,'home']" 
            (click)="onChangeLang(option)">
               <img src="../assets/img/flags/{{selectedOption.flag}}" 
             class="rds__flag-lang pr-2" >{{option.lang}}</a> 
        </div>
      </li>
    </ul>

如何在 bootstrap 4 中显示选中的选项？

How to show selected option in bootstrap 4?

bootstrap-4

ng-bootstrap

angular