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

Question

我正在尝试在我的应用程序中实现 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>

我只是想根据展开设置人字形 vs collapse.The 点击函数 collapseExpand(parent) 设置标志 "isExpand"

以上功能在 chrome 浏览器中运行良好，但在 IE 中无法运行。在 Internet Explorer 中不会触发 collapseExpand 函数。谁能告诉我如何解决它。

我正在使用 "@ng-bootstrap/ng-bootstrap": "^4.0.0", angular 7

Answer 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>

祝一切顺利。

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

ng-bootstrap accordion click not firing in IE

bootstrap-4

ng-bootstrap

angular