在没有子选项可用时,如何禁用下拉菜单?我有一些类似于以下代码的代码:
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;
}
上面的代码曾经在模板以引导程序3编写时起作用,但是在将代码迁移到ngx-bootstrap之后,我发现<li>
元素在单击按钮之前不存在。这导致条件if (this.optionsList)
总是失败。