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

Question

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

**这是我的代码**

    <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

您可以绑定click事件并在单击时调用函数，然后将选定项值存储在变量中，并在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类文件中

selectedItem: string;

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

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

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

Answer 2

最聪明的方法是创建一组选择选项，然后使用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>