Fatal编程技术网
  • javascript/
  • Javascript IE11中未渲染的角度组件

Javascript IE11中未渲染的角度组件

javascript angular

Javascript IE11中未渲染的角度组件,javascript,angular,frontend,internet-explorer-11,Javascript,Angular,Frontend,Internet Explorer 11,我有以下问题。我正在使用AngularV7构建一个小网站。问题是，我将一个mat表包装到一个单独的组件中，我将在整个应用程序中重用该组件，但该组件并非仅在IE11上呈现。我取消了IE11所需的polyfills的注释，但这没有帮助 有趣的是，所有html元素都加载到DOM中，但它们不可见控制台中没有错误或警告。 tsconfig.json { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "ou

我有以下问题。我正在使用AngularV7构建一个小网站。问题是，我将一个mat表包装到一个单独的组件中，我将在整个应用程序中重用该组件，但该组件并非仅在IE11上呈现。我取消了IE11所需的polyfills的注释，但这没有帮助

有趣的是，所有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"
    ]
  }
}

"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"
  },
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

{
  "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"
    ]
  }
}

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


出口
数据表.组件

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


{{normalizeColumnName（col）}
{{row[col]}
IE 11屏幕截图

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

你有什么建议吗？ 我感谢任何帮助，因为我已经没有选择了（如果你需要任何其他信息，请告诉我）

  • 取消对polyfills.ts中的所有
    Import
    s的注释
  • 安装这两个软件包
    • npm安装--保存classlist.js

    npm安装--保存web动画js

  • 编译并在IE上运行
    • 在DOM中呈现但不可见。。。你检查过它的CSS规则吗？你能在stackblitz中包含HTML或重现这个问题吗？我已经添加了代码片段和IE截图。我认为你需要填充web组件支持。尝试在页面的javascripts中包含webcomponents-lite.js或类似内容（您可以将其作为离散脚本标签加载，也可以将其与webpack/rollup/what have捆绑在一起）。您是否从“@angular/material”导入了{MatCheckboxModule}”；（以及app.module.ts文件中的其他Mat…s）？是否也像这样导入css（在styles.css文件中）@导入“~@angular/material/prebuild themes/indigo pink.css”；