时间戳

首页 > 解决方案 > Ngx-bootstrap：当没有可用选项时禁用下拉按钮

angular - Ngx-bootstrap：当没有可用选项时禁用下拉按钮

问题描述

当没有可用的子选项时，我们如何禁用下拉菜单？我有一些类似于下面的代码：

组件.html

<div class="btn-group" dropdown>
  <button dropdownToggle type="button" class="btn btn-default dropdown-toggle" [disabled]="!isOptionsVisible()">
    Request Actions <span class="caret"></span>
  </button>
  <ul id="dropdown-actions" *dropdownMenu class="dropdown-menu" #optionsList>
    <li *ngIf="condition1">
      <a class="dropdown-item">Option1</a>
    </li>
    <li *ngIf="condition2">
      <a class="dropdown-item">Option2</a>
    </li>
  </ul>
</div>

组件.ts

@ViewChild('optionsList') optionsList;

isOptionsVisible() {
  let visible = true;
  if (this.optionsList) {
    visible = this.optionsList.nativeElement.querySelectorAll('li').length > 0;
  }
  return visible;
}

上面的代码在模板是在 bootstrap 3 中编写时可以工作，但是在我们将代码迁移到 ngx-bootstrap 后，我发现<li>元素不存在，直到单击按钮。这导致条件if (this.optionsList)总是失败。

标签： angulardrop-down-menudropdownngx-bootstrap

解决方案

推荐阅读