如何使用＆lt; ul＆gt;如何控制选定的下拉选项。 ＆lt; li＆gt;

Question

在此代码中，我无法在控制台中安装选定的下拉菜单。

html

<div class="dropdown"><button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
        Dropdown
    </button>
    <ul class="dropdown-menu" (change)="selectChangeHandler($event)">
        <li class="dropdown-item" *ngFor="let option of selectedDay">{{option}}</li>
    </ul>
</div>```

TS.

selectedDay = ['GCP','Azure','AWS'];
  selectChangeHandler(event: any) {
    this.selectedDay = event.target.value;
    console.log(this.selectedDay)
 }

Answer 1

您无法将更改事件添加到UL标签，需要更改UL/LI标签才能选择/选项标签。您应该在Selected Day和ListSelectedDay变量之间脱颖而出。

html

<div class="dropdown">
  <button
    type="button"
    class="btn btn-primary dropdown-toggle"
    data-bs-toggle="dropdown"
  >
    Dropdown
  </button>
  <select class="dropdown-menu" (change)="selectChangeHandler($event)">
    <option class="dropdown-item" *ngFor="let option of listSelectedDay">
      {{ option }}
    </option>
  </select>
</div>

ts

export class AppComponent {
  listSelectedDay = ['GCP', 'Azure', 'AWS'];
  selectedDay = '';
  selectChangeHandler(event: any) {
    this.selectedDay = event.target.value;
    console.log(this.selectedDay);
  }
}

演示代码 htttps://stackblitz.com/editz.com/edit/angular-ivy--ivy--ivy-tapafd

Answer 2

可能是您可以使用该代码的按钮作为EG

---- html -----

<div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1" name="selected" >
      <li><a class="dropdown-item" data-bs-toggle="modal" *ngFor="let option of Menu">
      <button class="btn btn-secondary" type="button" (click)="selectedChanged(option)">{{option}}</button>
       </a></li>
  </ul>
</button>