我需要有关此 IE 错误的帮助，我认为该错误与我的 HTML 页面上的绑定(bind)问题有关。 我使用的是 IE 11 和 Angular 2。在 Chrome 和 Firefox 上没有错误，但我收到错误 仅适用于 IE 11。我无法追踪页面上的确切错误位置，但由于这部分错误，我知道它位于我的 HTML 页面上的某个位置。
位于 View_EdataReportingComponent0.prototype.detectChangesInternal (函数代码:2933:5)
这是 IE 控制台的屏幕截图，显示了错误。
这是我的 HTML 页面...
<div class="main-header row px-0">
<div class="upload-bar" *ngIf="(uploader.progress || 0) > 0 || isUploadFinished">
<span class="caption-left">
<i class="fa fa-upload" aria-hidden="true"></i> Uploading files <b>({{(uploader.progress || 0)}}%)</b>
</span>
<span class="caption-right file-list">
<i class="mlcons_filled_close" (click)="abortUploadingFiles($event)" aria-hidden="true"></i>
<a href="#" class="a-link" (click)="abortUploadingFiles($event)" tabindex="0">Cancel</a>
</span>
<div class="upload-progress" [ngStyle]="{ 'width': (uploader.progress || 0) + '%' }"> </div>
</div>
<div class="container-fluid">
<div class="main-body container">
<h2 class="pull-left">eData Reporting</h2> <!-- <hermes-toast></hermes-toast> -->
</div>
<form (ngSubmit)="onSubmit(modalForm.value, $event)" [formGroup]="modalForm" name="eDataReportForm" #eDataReportForm="ngForm">
<div class="form-group col-md-6 col-lg-6 px-0-left data-form">
<div class="form-group col-md-12 col-lg-12">
<div class="col-md-4 px-0 form-label">
<label for="reportingFrequency" class="label-Names- label-inline">Reporting Frequency:</label>
</div>
<div class="col-md-8 px-0">
<div *ngIf="modalMode == modalModes.EditMode">
<select id="report-frequency" class="form-control" formControlName="reportingFrequency" (change)="setReportingFrequency()" tabindex="0">
<option value="null">Please Select</option>
<option *ngFor="let reportingFrequency of reportingFrequencies" [value]="reportingFrequency.FieldValueKey">{{reportingFrequency.DisplayName}}</option>
</select>
</div>
<div id="report-freq-viewmode" *ngIf="modalMode == modalModes.ViewMode" class="view-mode" >
{{originaleDataReport?.reportingFrequencyName && originaleDataReport.reportingFrequencyName()}}
</div>
</div>
</div>
<div class="form-group col-md-12 col-lg-12" *ngIf="(this.originaleDataReport.reportingFrequencyName && this.originaleDataReport.reportingFrequencyName())=='Yes - Other' || freqReport=='Yes - Other' ">
<div class="col-md-4 px-0 form-label">
<label for="other" class="label-Names- label-inline" [class.required-field]="modalMode != modalModes.ViewMode">Other:</label>
</div>
<div class="col-md-8 px-0">
<div *ngIf="modalMode == modalModes.EditMode">
<input id="other" maxlength="50" formControlName="other" type="text" class="form-control" (keydown)="otherValue($event)" tabindex="0">
<div *ngIf="modalForm.controls.other.invalid && modalForm.controls.other.touched" class="alert-danger">
<span class="mlcons_circled_information"><span class="path1"></span><span class="path2"></span></span> Other is required.
</div>
</div>
<div *ngIf="modalMode == modalModes.ViewMode " class="view-mode" >
{{originaleDataReport?.FrequencyOtherNote}}
</div>
</div>
</div>
<div class="form-group col-md-12 col-lg-12">
<div class="col-md-12 col-lg-12 px-0">
<div class="col-md-4 px-0 form-label">
<label for="report-type" class="label-Names- label-inline">Type of Report:</label>
</div>
<div class="col-md-8 px-0">
<div *ngIf="modalMode == modalModes.EditMode">
<select id="report-type" class="form-control" formControlName="typeOfReport" (change)="setTypeOfReport()" tabindex="0">
<option value="null">Please select</option>
<option *ngFor="let item of typeofReports" [value]="item.FieldValueKey">{{item.DisplayName}}</option>
</select>
</div>
<div *ngIf="modalMode == modalModes.ViewMode" class="view-mode" >
{{originaleDataReport?.typeofReportsName && originaleDataReport.typeofReportsName()}}
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-12 " *ngIf="(this.originaleDataReport.typeofReportsName && this.originaleDataReport.typeofReportsName())=='Other' || typeReport=='Other'">
<br />
<div *ngIf="modalMode == modalModes.ViewMode " class="col-md-11 px-0 px-30-right">
<label class="label-Names- label-inline">Sample Report:</label>
<div *ngFor="let item of fileAttachment" class="file-list">
<div *ngIf="item?.Sample_Report?.FileName">
<a id="link-icon" href="#" (click)="$event.preventDefault(); downloadFile($event)">
<file-icon [fileExtension]="item?.Sample_Report?.FileExtension"></file-icon>
</a>
<span class="file-info">
<label class="label-Names- label-inline">
<a id="link" href="#" (click)="$event.preventDefault(); downloadFile($event)" class="a-link">
{{ item?.Sample_Report?.FileNameDisplay }}
</a>
</label>
</span> <b>({{ item?.Sample_Report?.FileSize/1024/1024 | number:'.2' }} MB)</b>
</div>
</div>
</div>
<div *ngIf="modalMode == modalModes.EditMode " class="col-md-12 col-lg-12 px-0 px-30-right ">
<label for="file-upload" class="label-Names-upload">Sample Report</label> <label class="max-size-limit-label">(Maximum file size is 20MB.)</label>
<div *ngFor="let item of fileAttachment;" class="added" tabindex="0">
<div *ngIf="item?.Sample_Report?.FileName && !isSetforRemoval">
<a id="link-icon" href="#" (click)="$event.preventDefault(); downloadFile($event)" class="pull-left" tabindex="-1">
<file-icon [fileExtension]="item?.Sample_Report?.FileExtension"></file-icon>
</a>
<span class="file-info pull-left">
<label class="label-Names- label-inline file-limit">
<a id="link" href="#" (click)="$event.preventDefault(); downloadFile($event)" class="a-link" tabindex="-1">
{{ item?.Sample_Report?.FileNameDisplay }}
</a>
</label>
</span> <b class="pull-left">({{ item?.Sample_Report?.FileSize/1024/1024 | number:'.2' }} MB)</b>
<a href="#" (click)="setToRemoveSampleFile($event)" class="a-link pull-right" tabindex="-1">Remove</a>
<i class="mlcons_filled_close pull-right" aria-hidden="true" tabindex="-1" (click)="setToRemoveSampleFile($event)"></i>
</div>
<div *ngIf="isSetforRemoval">
<span class="file-limit pull-left"><b> {{ item?.Sample_Report?.FileNameDisplay }} </b></span>
<a href="#" (click)="KeepFileAttachment($event)" class="a-link pull-right">Keep File</a>
<i class="mlcons_stroke_refresh pull-right" aria-hidden="true" (click)="KeepFileAttachment($event)"></i>
<span class="pull-left"> will be removed when you save.</span>
</div>
</div>
<br />
<div id="file-upload" ng2FileDrop
[class.file-over]="hasDropZoneOver"
(fileOver)="fileOver($event)"
[uploader]="uploader"
class="well drop-zone" *ngIf="fileEmpty == null">
<div class="form-group col-md-12 col-lg-12 ">
<div class="col-md-2 col-lg-2 px-0" *ngIf="uploadStatus == uploadStates.Ready && uploader.queue.length == 0">
<div class="change-icon" *ngIf="uploadStatus == uploadStates.Ready">
<span class="mlcons_stroke_add_doc">
<span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span>
</span>
<span class="mlcons_stroke_upload_doc">
<span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span>
</span>
</div>
<span *ngIf="uploadStatus == uploadStates.Failed" class="mlcons_stroke_failed_upload">
<span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span>
</span>
<span *ngIf="uploadStatus == uploadStates.Uploading && (uploader.progress || 0) <= 99" class="mlcons_stroke_upload_doc">
<span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span>
</span>
<span *ngIf="uploadStatus == uploadStates.Uploading && (uploader.progress || 0) > 99" class="mlcons_stroke_success_upload">
<span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span><span class="path8"></span><span class="path9"></span>
</span>
</div>
<div class="col-md-7 col-lg-7 px-0 margin-top-10" *ngIf="uploadStatus == uploadStates.Ready && uploader.queue.length == 0">
<div class="align-left" *ngIf="uploadStatus == uploadStates.Ready">Upload a file to the project.</div>
<div *ngIf="uploadStatus == uploadStates.Ready"
class="second-message align-left">Drag and drop a<b> file </b>here or click Add File to browse.</div>
</div>
<div class="col-md-8 col-lg-8 px-0" *ngIf="(uploadStatus == uploadStates.Ready && uploader.queue.length > 0) || uploadStatus == uploadStates.Success || uploadStatus == uploadStates.Uploading || uploadStatus == uploadStates.Failed">
<div [class.failed]="uploadStatus == uploadStates.Failed"
[class.upload]="uploadStatus == uploadStates.Uploading"
class="file-info">
<file-icon [fileExtension]="fileExtension"></file-icon> <div>
{{fileInfo}}
<span *ngIf="uploadStatus == uploadStates.Success || uploadStatus == uploadStates.Uploading" class="mlcons_circled_check"><span class="path1"></span><span class="path2"></span></span>
<span *ngIf="(uploadStatus == uploadStates.Failed && !rename)" class="mlcons_circled_error"><span class="path1"></span><span class="path2"></span></span>
</div>
</div>
</div>
<div class="remove-file form-group col-md-4 col-lg-4 px-0" *ngIf="uploadStatus == uploadStates.Ready && uploader.queue.length > 0">
<div class="link-margin-right pull-right px-0" *ngIf="uploader.queue.length > 0">
<div class="remove-file">
<span class="mlcons_filled_close" (click)="$event.preventDefault(); remove()"></span> <a href="#" class="a-link" (click)="$event.preventDefault(); remove()">Remove</a>
</div>
</div>
</div>
<div class="form-group col-md-4 col-lg-4 px-0 remove-file" *ngIf="uploadStatus == uploadStates.Uploading">
<div class="remove-file pull-right link-margin-right">
<span class="mlcons_filled_close"></span> <a href="#" class="a-link" (click)="$event.preventDefault(); uploader.cancelAll()">Cancel</a>
</div>
</div>
<div class="col-md-3 col-lg-3 add-file-btn" *ngIf="uploadStatus == uploadStates.Ready && uploader.queue.length == 0">
<input [hidden]="true" #file type="file" ng2FileSelect [uploader]="uploader" (change)="fileChangeEvent($event)" />
<button (click)="$event.preventDefault(); file.click()" class="btn btn-primary"><i class="mlcons_filled_add"> </i> Add File</button>
</div>
<div class="form-group col-md-12 col-lg-12 px-0">
<div class="padding-lr-15 file-progress">
<div class="progress upload-progress" *ngIf="uploadStatus == uploadStates.Uploading">
<div class="progress-bar" [class.failed]="uploadStatus == uploadStates.Failed" role="progressbar" [ngStyle]="{ 'width': uploader.progress + '%' }"></div>
</div>
</div>
<div *ngIf="uploadStatus == uploadStates.Uploading && uploader.progress > 0"
[class.failed]="uploadStatus == uploadStates.Failed"
[class.upload]="uploadStatus == uploadStates.Uploading"
class="file-info-progress padding-lr-15">
Uploading file <span>({{uploader.progress || 0}}%)</span>
</div>
<div *ngIf="fileExceeded" class="duplicate-file-name-error">
<span class="mlcons_circled_information"><span class="path1"></span><span class="path2"></span></span> {{fileName}} exceeds the maximum size limit of 20 MB.
</div>
<div *ngIf="errorOccured && uploadStatus == uploadStates.Failed" class="duplicate-file-name-error">
<span class="mlcons_circled_information"><span class="path1"></span><span class="path2"></span></span> Upload was unsuccessful. Please try again.
</div>
</div>
<div> </div>
</div>
</div>
</div>
</div>
<div class="form-group col-md-12 col-lg-12 ">
<div class="col-md-4 px-0-left form-label">
<label for="recipients" class="label-Names- label-inline">Recipients:</label>
</div>
<br />
<div class="form-group col-md-12 col-lg-12 px-0">
<textarea class="col-md-12 col-lg-12 px-2 textstyle" [readonly]="modalMode != modalModes.EditMode" maxlength="200" id="recipients" formControlName="recipients" (keydown)="recipientValue($event)" tabindex="0">{{originaleDataReport?.Recipient}} </textarea>
</div>
<div class="form-group col-md-12 px-0 px-25-pad-bottom">
<span class="col-md-12 border-bottom-1"></span>
<hr />
</div>
<div *ngIf="modalMode == modalModes.EditMode" class="form-group col-lg-12 px-0">
<button id="save-button" name="save-button" class="btn btn-primary" [disabled]="!isButtonEnable " type="submit" >Save Changes</button>
<button id="cancel-button" class="btn btn-default" type="submit" (keydown.Tab)="cancelButtonTab($event)" (click)="cancelClick($event)" tabindex="0">Cancel</button>
</div>
<div *ngIf="modalMode == modalModes.ViewMode" class="form-group col-lg-12 px-0 footer-action">
<span class="mlcons_filled_edit"></span> <a id="edit-data" class="a-link" (keydown.Tab)="$event.preventDefault" (keydown.enter)="onEditDataClicked($event)" (click)="onEditDataClicked($event)" >Edit eData Reporting</a>
</div>
</div>
</div>
</form>
</div>
</div>
希望有人能帮我找出这个错误的原因。谢谢
最佳答案
在 IE 中出现此类错误是完全正常的。它根本不支持所有 ES6，然后您再次需要在 IE 中添加一些缺少的库。
转到 src/polyfills.ts 并将其内容替换为以下内容:
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/client/shim';
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js'; // Run `npm install --save classlist.js`.
/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
/**
* Required to support Web Animations `@angular/animation`.
* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
**/
import 'web-animations-js'; // Run `npm install --save web-animations-js`.
* Zone JS is required by Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
运行以下命令:
- npm install --save classlist.js
- npm install --save web-animations-js
关于javascript - Angular 2 的 IE 错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46695280/