ng-bootstrap手风琴单击未在IE中触发

时间:2019-01-02 22:59:18

标签: angular bootstrap-4 ng-bootstrap

我正在尝试在我的应用程序中实现ng-bootstrap手风琴

<ngb-accordion [closeOthers]="true" activeIds="config-panel-one">
          <div *ngFor="let parent of parentsInfo;let j = index">
            <ngb-panel>
              <ng-template ngbPanelTitle>
                <div role="button" (click)="collapseExpand(parent)">
                    {{parent.folderName}}
                  <span class="fa fa-chevron-right" [ngClass]="{'fa-chevron-down':parent.isExpand, 'fa-chevron-right':!parent.isExpand}"></span>
               </div>
              </ng-template>
              <ng-template ngbPanelContent>
               {{parent.filename}}
              </ng-template>
            </ngb-panel><br>
          </div>
        </ngb-accordion>

我只是尝试根据展开与折叠设置人字形。单击功能陷塌扩展(父级)设置标志“ isExpand”

enter image description here

以上功能在chrome浏览器中正常运行,但在IE中不起作用。在Internet Explorer中,不会启动crashExpand函数。谁能让我知道如何解决它。

我正在使用“ @ ng-bootstrap / ng-bootstrap”:“ ^ 4.0.0”,角度为7

1 个答案:

答案 0 :(得分:1)

问题:主要是ngb-accordian中有一个默认按钮,现在从您的代码中(ngb-accordian)看到模板下的div时,它只是忽略它并继续前进。

解决方案:我们可以使用按钮代替div,如下所示:

 <ng-template ngbPanelTitle>
                <button class="btn btn-link"  (click)="collapseExpand(parent)">
                    {{parent.folderName}}
                  <span class="fa fa-chevron-right" [ngClass]="{'fa-chevron-down':parent.isExpand, 'fa-chevron-right':!parent.isExpand}"></span>
               </button>
              </ng-template>

祝一切顺利。