如何使用angular2啓用/禁用下拉菜單？

Question

希望這不是一個重複的問題。我有一些佈局如下，

<div class="btn-group"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    Category <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu default-dropdown"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
    </ul> 
</div> 

如何啓用下拉按鈕點擊角？

Answer 1

要啓用/禁用

<div class="btn-group"> 
    <button [attr.disabled]="dropdownDisabled ? true : null" 
      type="button" class="btn btn-default dropdown-toggle" 
      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 
    Category <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu default-dropdown"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
    </ul> 
</div> 

<button (click)="dropdownDisabled = !dropdownDisabled">toggle</button> 

打開/關閉

我假設你正在使用的引導CSS樣式

<div class="btn-group dropdown" [class.open]="dropdownOpened"> 
    <button (click)="dropdownOpened = !dropdownOpened" 
      type="button" class="btn btn-default dropdown-toggle" 
      data-toggle="dropdown" aria-haspopup="true" 
      [attr.aria-expanded]="dropdownOpened ? 'true': 'false' "> 
    Category <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu default-dropdown"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
    </ul> 
</div>