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;
 }

将图像添加到可折叠面板div angular2

1 个答案: