У меня следующая проблема.Я строю небольшой сайт, используя Angular v7.Проблема в том, что я обернул таблицу матов в отдельный компонент, который я собираюсь повторно использовать в приложении, но этот компонент отображается не только в IE11.Я раскомментирую полифилы, необходимые для IE11, но это не помогает.
Интересный факт заключается в том, что все элементы HTML загружаются в DOM, но они не видны. У меня нет ошибок или предупреждений в консоли.
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowJs": true,
"importHelpers": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
}
}
polyfills.ts
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js';
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';
/**
* If the application will be indexed by Google Search, the following is required.
* Googlebot uses a renderer based on Chrome 41.
* https://developers.google.com/search/docs/guides/rendering
**/
// import 'core-js/es6/array';
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js'; // Run `npm install --save classlist.js`.
/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';
package.json
"dependencies": {
"@angular/animations": "^7.1.2",
"@angular/cdk": "^7.1.1",
"@angular/common": "~7.1.0",
"@angular/compiler": "~7.1.0",
"@angular/core": "~7.1.0",
"@angular/flex-layout": "^7.0.0-beta.19",
"@angular/forms": "~7.1.0",
"@angular/material": "^7.1.1",
"@angular/platform-browser": "~7.1.0",
"@angular/platform-browser-dynamic": "~7.1.0",
"@angular/router": "~7.1.0",
"classlist.js": "^1.1.20150312",
"core-js": "^2.6.1",
"core-js-bundle": "^3.0.0-beta.7",
"material-design-icons": "^3.0.1",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"web-animations-js": "^2.3.1",
"zone.js": "~0.8.26"
},
invoices.component.html
<div class="container">
<test-data-table [ngClass]="{ 'no-selection': (!selection || selection.length === 0) }"
[rawDataSource]="invoices"
[displayedColumns]="displayedColumns"
(onSelectionChange)="onSelection($event)">
</test-data-table>
<div class="export-container" fxLayout="row nowrap" fxLayoutAlign="end center" *ngIf="displayExport">
<button mat-raised-button (click)="export()">Export</button>
</div>
</div>
data-table.component
<div class="data-wrapper">
<mat-form-field class="full-width">
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<mat-table #table [dataSource]="dataSource" class="full-width">
<ng-container *ngFor="let col of displayedColumns" [cdkColumnDef]="col">
<mat-header-cell *cdkHeaderCellDef>
<span *ngIf="col !== 'select'">{{ normalizeColumnName(col) }}</span>
<mat-checkbox *ngIf="col === 'select'"
(change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</mat-header-cell>
<mat-cell *cdkCellDef="let row">
<span *ngIf="col !== 'select' &&
col !== 'pdfDocument' &&
col !== 'leaseDocuments' &&
col !== 'technicalSpecifications' &&
col !== 'template'">{{ row[col] }}</span>
<mat-checkbox *ngIf="col === 'select'"
(click)="selectionChange();$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
<div *ngIf="col === 'template' ||
col === 'pdfDocument' ||
col === 'leaseDocuments' ||
col === 'technicalSpecifications'">
<a href="{{ '/api/documents/' + row[col] }}" target="_blank" *ngIf="row[col] !== null && row[col] !== ''">
<img src="/assets/images/icons/{{ col }}.png" alt="pdf_download"/>
</a>
</div>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
</div>
IE 11 снимок экрана
У вас есть предложения?Я ценю любую помощь, потому что у меня заканчиваются варианты (просто дайте мне знать, если вам нужна какая-либо другая информация).