Ngx-bootstrap: отключить выпадающую кнопку, когда нет доступных опций

Question

Как отключить раскрывающийся список, когда нет доступных дочерних параметров? У меня есть код, похожий на приведенный ниже:

Component.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>

Component.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) всегда терпеть неудачу.