将图像添加到可折叠面板Div Angular2中

Question

我使用以下div的可折叠面板

<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<a data-toggle="collapse" href="#collapse1" style="font-size:small;" data-parent="#accordion">Employee</a>
 </div>
<div id="collapse1" class="panel-collapse collapse">
Some Text
</div>

功能明智的工作正常。当面板切换时，我想添加一个图像向下箭头和向上箭头。我该如何在Angular2中这样做？

Answer 1

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
         <div class="panel-heading" (click)="changeIcon()">
            <span class="glyphicon" [ngClass]="{'glyphicon-chevron-up': opendPanel , 'glyphicon-chevron-down': !opendPanel }" aria-hidden="true" style="float: right;"></span>
            <a data-toggle="collapse" href="#collapse1" style="font-size:small;" data-parent="#accordion">Employee</a>
          </div>
     <div id="collapse1" class="panel-collapse collapse">
                 Some Text
      </div>
    </div>
</div>

您可以使用bootstrap glyphicons将箭头放在面板标头上并使用[ngclass]

控制它

将单击事件添加到面板标题以更改图标在您的组件类中，创建changeicon（）函数以更改opendPanel值：

 opendPanel:boolean = false;
 changeIcon() {
   this.opendPanel = this.opendPanel ? false: true;
 }