bootstrap摺疊面板在angular2中給出奇怪的輸出

Question

我只是想在angular2中搜索過濾器的簡單摺疊面板。 這是非常簡單的，但我沒有得到我在這裏失蹤的東西... 它沒有顯示按鈕點擊面板正文，但是圖標改變了它的行爲。 我在後面的代碼中設置了布爾值，以便在點擊面板內部的搜索按鈕時，也會導致崩潰。 請糾正我在哪裏，我錯了......在先進

<div class="panel panel-default"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <!--<a data-toggle="collapse" data-target="#collapse1"> 
      Collapsible panel</a>--> 
      <button type="button" class="glyphicon" 
        [ngClass]="{'glyphicon-chevron-up': isCollapsedContent , 'glyphicon-chevron-down': !isCollapsedContent }" 
        style="float: right;" data-toggle="collapse" data-target="#collapse1" 
        (click)="isCollapsedContent = !isCollapsedContent"></button> 
     </h4> 
    </div> 
    <div id="collapse1" class="panel-collapse collapse"> 
     <div class="panel-body">Panel Body</div> 
     <div class="panel-footer">Panel Footer</div> 
    </div> 
</div> 

Answer 1

thanq您應該使用如下

<div> 
     <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapse1">Simple collapsible</button> 
     </div> 
     <div class="panel-body"> 
     <div id="collapse1" class="collapse"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
    </div> 
    </div> 
</div> 

LIVE DEMO