bootstrap 折叠面板在 angular2 中给出奇怪的输出

Question

我只想要 angular2 中搜索过滤器的简单折叠面板。很漂亮 simple.but 我没有得到我在这里缺少的东西...... 它没有在按钮点击时显示面板主体，但字形改变了它的行为。我在后面的代码中设置了布尔值，以便在单击面板主体内的搜索按钮时也会导致崩溃。请纠正我哪里出错了... thanq 高级

<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

bootstrap 折叠面板在 angular2 中给出奇怪的输出

bootstrap collapse panel giving strange output in angular2

twitter-bootstrap

angular-ui-bootstrap

angular2-forms

angular