Я написал angular 9 компонент, который имеет элементы управления свертыванием. Кажется, что сворачивание не работает в браузере Edge
Я пробовал два разных типа компонентов свертывания
- нг- bootstrap свертывание
- нгб-аккордеон
и оба не работали в пограничном браузере
<!--
===============================================
the code code with "ng-bootstrap collapse "
==============================================
-->
<div class="animated fadeIn"
style="margin-left: 2%;margin-right: 2%;margin-top: 2%;width: 80%;"
id="qgroup-div-g{{ei}}"
*ngFor="let g of this.survey?.MyQuestionGroup;let ei=index;">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<!-- <i class="fa fa-align-justify"></i> Combined All Table -->
<div class="row" style="position: relative;">
<div class="col-6 col-sm-4 col-md-2 col-xl mb-3 mb-xl-0">
<h5 style="text-align: left;">
{{g?.QuestionGroupName}}
<button type="button"
class="btn btn-success mr-1"
style="position:absolute;right: 10px;top:5px;"
(click)="isCollapsed[ei] = !isCollapsed[ei]"
[attr.aria-expanded]="!isCollapsed[ei]">
<i class="mdi mdi-chevron-down"></i>
</button>
</h5>
</div>
</div>
</div>
<div [ngbCollapse]="isCollapsed[ei]" id="qgroup-collapse-wrapper-g{{ei}}">
<div class="card-body" style="border: 1px solid red">
<!-- The core of the Suervey Question and stars -->
<div class="row justify-content-md-center" *ngFor="let q of g?.MyQuestions;let rnum=index" id="qrow_{{rnum}}_g{{ei}}" style="border: 0px solid red;display: flex;">
<div class="col-1" *ngIf="q?.FeedbackTypeId==1" style="border: 1px solid blue;">
{{rnum + 1}}
</div>
<div class="col-6" *ngIf="q?.FeedbackTypeId==1" style="border: 1px solid blue;">
<!-- Quality of the software application installed -->
{{q?.QuestionText}}
</div>
<div style="border:1px solid blue;"
id="qrow_rating_{{rnum}}_g{{ei}}"
*ngIf="q?.FeedbackTypeId==1"
class="col-xs-auto">
<star-rating id="rating_{{q?.QuestionId}}"
value='{{this.ratedValue}}'
totalstars="5"
checkedcolor="red"
uncheckedcolor="black"
size="40px"
readonly="false"
(rate)="onRate($event,'rating_', q?.QuestionId, q?.FeedbackTypeId )">
</star-rating>
</div>
<div *ngIf="q?.FeedbackTypeId==2" class="col-md-12">
<!-- Quality of the software application installed -->
{{q?.QuestionText}}
</div>
<br>
<!-- <div id="qrow_rating_{{rnum}}_g{{ei}}" *ngIf="q?.FeedbackTypeId==2"> -->
<div *ngIf="q?.FeedbackTypeId==2" class="col-md-12" style="border:1px solid black;">
<textarea id="txa_qrow_rating_{{rnum}}_g{{ei}}"
rows="10"
cols="100"
*ngIf="q?.FeedbackTypeId==2"
class="col-md-12"
(input)="onInputAnswerChange($event.target.value,q?.QuestionId)"
></textarea>
</div>
<!-- </div> -->
</div>
<!-- ./ The core of the Suervey Question and stars -->
</div>
</div>
</div>
</div>
<!--/.col-->
</div>
</div>
<div id="dvFeedbackSubmit" class="col-md-12" style="border:0px solid black;text-align:center; margin-left: 2%;margin-right: 2%;">
<input type="button" id="btnSubmit" value="Submit" class="btn btn-success" (click)="submitFeeds()" />
</div>
код с ngb-гармошкой
<!--
===============================================
the code code with "ngb-accordion"
==============================================
-->
<ngb-accordion #a="ngbAccordion" activeIds="custom-panel-1">
<ngb-panel id="custom-panel-g{{ei}}" *ngFor="let g of this.survey?.MyQuestionGroup;let ei=index;">
<ng-template ngbPanelHeader let-opened="opened">
<div class="d-flex align-items-center justify-content-between">
<h5 class="m-0">{{g?.QuestionGroupName}} - {{ opened ? 'opened' : 'collapsed' }}</h5>
<button ngbPanelToggle class="btn btn-link p-0">Toggle first</button>
</div>
</ng-template>
<ng-template ngbPanelContent>
<div class="card">
<div class="card-body">
<div class="row" *ngFor="let q of g?.MyQuestions;let rnum=index" id="qrow_{{rnum}}_g{{ei}}" style="border: 1px solid red;">
<div class="column" *ngIf="q?.FeedbackTypeId==1" style="border: 1px solid blue;">
<!-- Quality of the software application installed -->
{{rnum + 1}}.{{q?.QuestionText}}
</div>
<div style="border:1px solid black;align-items: center;"
id="qrow_rating_{{rnum}}_g{{ei}}"
*ngIf="q?.FeedbackTypeId==1">
<star-rating id="rating_{{q?.QuestionId}}"
value='{{this.ratedValue}}'
totalstars="5"
checkedcolor="red"
uncheckedcolor="black"
size="40px"
readonly="false"
(rate)="onRate($event,'rating_', q?.QuestionId, q?.FeedbackTypeId )">
</star-rating>
</div>
<div *ngIf="q?.FeedbackTypeId==2" class="col-md-12">
{{q?.QuestionText}}
</div>
<br>
<!-- <div id="qrow_rating_{{rnum}}_g{{ei}}" *ngIf="q?.FeedbackTypeId==2"> -->
<div *ngIf="q?.FeedbackTypeId==2" class="col-md-12" style="border:1px solid black;">
<textarea id="txa_qrow_rating_{{rnum}}_g{{ei}}"
rows="10"
cols="100"
*ngIf="q?.FeedbackTypeId==2"
class="col-md-12"
(input)="onInputAnswerChange($event.target.value,q?.QuestionId)"
></textarea>
</div>
<!-- </div> -->
</div>
</div>
</div>
</ng-template>
</ngb-panel>
</ngb-accordion>
<div id="dvFeedbackSubmit" class="col-md-12" style="border:1px solid black;text-align:center;">
<input type="button" id="btnSubmit" value="Submit" class="btn btn-success" (click)="submitFeeds()" />
</div>
В обоих случаях все работает хорошо с chrome, но в браузере Edge он выдает ошибку, похоже, эта ошибка появляется, когда я нажимаю «сначала переключить», чтобы переключить коллапс.
Вот ошибка, отображаемая в браузере Edge ::
ERROR TypeError: Object doesn't support property or method 'attachShadow'
Function code (194) (51,3)
[object Error]: {description: "Object doesn't support property or method 'attachShadow'", message: "Object doesn't support property or method 'attachShadow'", ngDebugContext: Object, ngErrorLogger: function() { [native code] }, number: -2146827850...}
description: "Object doesn't support property or method 'attachShadow'"
message: "Object doesn't support property or method 'attachShadow'"
ngDebugContext: Object
ngErrorLogger: function() { [native code] }
number: -2146827850
stack: "TypeError: Object doesn't support property or method 'attachShadow' at ShadowDomRenderer (http://localhost:4200/vendor.js:84485:13) at DomRendererFactory2.prototype.createRenderer (http://localhost:4200/vendor.js:84321:17) at AnimationRendererFactory.prototype.createRenderer (http://localhost:4200/vendor.js:83319:9) at DebugRendererFactory2.prototype.createRenderer (http://localhost:4200/vendor.js:75426:9) at createComponentView (http://localhost:4200/vendor.js:74407:9) at callWithDebugContext (http://localhost:4200/vendor.js:75405:9) at debugCreateComponentView (http://localhost:4200/vendor.js:74939:5) at createViewNodes (http://localhost:4200/vendor.js:74448:21) at createEmbeddedView (http://localhost:4200/vendor.js:74391:5) at callWithDebugContext (http://localhost:4200/vendor.js:75405:9)"
__proto__: Error
ERROR CONTEXT [object Object]
Function code (194) (51,3)
[object Object]: {component: <Permission denied>, componentRenderElement: <Permission denied>, context: <Permission denied>, elDef: Object, elOrCompView: <Permission denied>...}
component: <Permission denied>
componentRenderElement: <Permission denied>
context: <Permission denied>
elDef: Object
elOrCompView: <Permission denied>
elView: Object
injector: Object
nodeDef: Object
nodeIndex: 3
providerTokens: Array
references: Object
renderNode: <Permission denied>
view: Object
__proto__: Object
Как мне исправить эту проблему?
Если в браузере Edge произошел сбой на элементах управления свертыванием ... какой элемент управления лучше использовать вместо свертывания и аккордеона, который предоставляет аналогичные функции и будет работать как на EDGE, так и на Chrome?