css - 是什么导致 Edge 浏览器上的切换失败?
问题描述
我写了一个有折叠控件的 Angular 9 组件。似乎崩溃在 Edge 浏览器上不起作用
我尝试了两种不同类型的折叠组件
- ng-bootstrap 崩溃
- ngb-手风琴
并且两者都不适用于边缘浏览器
<!--
===============================================
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-accordion 的代码
<!--
===============================================
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?
解决方案
推荐阅读
- reactjs - 材质 UI 间隙道具被 box-sizing:border-box 忽略,有没有办法强制它不忽略间隙?
- c - mov $0, -4(%rsp) 有什么作用?
- docker - 是否可以在 Docker-compose 中编写跨平台驱动器映射?
- javascript - 如何使用机车库禁用智能手机上的粘性元素?
- python - 在 python 中声明全局变量有什么矛盾吗?
- python - 将多个跟踪添加到子图的正确方法 - Plotly,Python
- spring-boot - 有什么方法可以分离 head 标签中列出的 css 和 js 库并在 thymeleaf 模板引擎(spring boot)中随时重用?
- python - 在对象内附加列表和比较
- html - 限制元素的宽度或将其剪辑到另一个元素
- python - 将报告软件的输出从交叉表转换为标准表格形状