如何使用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>

打開/關閉

我假設您使用的是 bootstrap 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>