在angular13中的任何输入字段上按下回车键时如何避免更改ng bootstrap下拉菜单

Question

我正在使用角度供电的引导下拉菜单，每当我在输入中输入按键时，它总是将下拉值更改为第一个选项。

演示链接

HTML：

<div class="row mb-3 mt-3">
          <div class="col">
            <div ngbDropdown class="d-inline-block">
              <button
                type="button"
                class="btn btn-outline-primary"
                id="dropdownBasic1"
                ngbDropdownToggle
              >
                {{ clickMessage }}
              </button>
              <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
                <button
                  ngbDropdownItem
                  class="nav-link"
                  href="#"
                  (click)="getText($event.target.innerText)"
                >
                  Option 1
                </button>
                <button
                  ngbDropdownItem
                  class="nav-link"
                  href="#"
                  (click)="getText($event.target.innerText)"
                >
                  Option 2
                </button>
                <button
                  ngbDropdownItem
                  class="nav-link"
                  href="#"
                  (click)="getText($event.target.innerText)"
                >
                  Option 3
                </button>
              </div>
            </div>
          </div>
        </div>

TS：

  clickMessage = 'Choose an option';

  getText(text) {
    this.clickMessage = text;
  }

Answer 1

将以下代码添加到您的 ts 文件中。

  @HostListener('keydown', ['$event']) public onKeyDown(evt) {
    if (evt.key === 'Enter') {
      evt.preventDefault();
      this.onSubmit();
    }
  }

我在下面的 stackblitz 中为你写了它。

https://stackblitz.com/edit/angular12-bootstrap-skiant?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.module.ts

Answer 2

您看到的行为是由于您有一些没有任何类型属性的按钮，并且默认情况下表单中的按钮会触发提交事件。将类型添加到下拉列表中的按钮，它应该可以工作。

<div ngbDropdownMenu aria-labelledby="dropdownBasic1">
    <button
        type="button"
        ngbDropdownItem
        class="nav-link"
        href="#"
        (click)="getText($event, $event.target.innerText)"
    >
        Option 1
    </button>
    <button
        type="button"
        ngbDropdownItem
        class="nav-link"
        href="#"
        (click)="getText($event, $event.target.innerText)"
    >
        Option 2
    </button>
    <button
        ngbDropdownItem
        class="nav-link"
        href="#"
        (click)="getText($event, $event.target.innerText)"
    >
        Option 3
    </button>
</div>