angle2に奇妙な出力を与えるブートストラップ折りたたみパネル

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

にあなたは

<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