Question

我仅在IE 11中收到以下错误，我进行了大量搜索，并且我已取消注释所需的polyfills，但仍然出现错误。此外，当我删除它正常工作的组件时，似乎我在其中一个消耗API的组件中得到错误。所以我想念一些东西？

似乎问题是[focus] =“i === activeIndex”，当我删除它时，它工作？但为什么

Unable to get property 'apply' of undefined or null reference

我的polyfill.ts

    /**
     * This file includes polyfills needed by Angular and is loaded before the app.
     * You can add your own extra polyfills to this file.
     *
     * This file is divided into 2 sections:
     *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
     *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
     *      file.
     *
     * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
     * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
     * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
     *
     * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
     */

    /***************************************************************************************************
     * BROWSER POLYFILLS
     */

    /** IE9, IE10 and IE11 requires all of the following polyfills. **/
    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/platform-browser/animations`.
     * 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.



            /***************************************************************************************************
             * APPLICATION IMPORTS
             */

            /**
             * Date, currency, decimal and percent pipes.
             * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
             */
            import 'intl';  // Run `npm install --save intl`.
            /**
             * Need to import at least one locale-data with intl.
             */
            import 'intl/locale-data/jsonp/en';

message-list.component.html

   <div *ngIf="!ifMessagesFound" class="container-fluid messages-wrapper" #em (selectKey)="keyChange($event)">
<div class="row actions_list">
    <div class="col-lg-3" style="padding-left:0">
        <button *ngIf="!selectAllbtn" type="button" class="btn btn-default custom_all_btn" (click)="selectAllChecks(); selectAllbtn = !selectAllbtn">Select All</button>
        <button *ngIf="selectAllbtn" type="button" class="btn btn-default custom_all_btn" (click)="deselectAllChecks();  selectAllbtn = !selectAllbtn">Deselect All</button>
    </div>
    <div class="col-lg-4" style="text-align:right">
        <span class="result_wrapper" *ngIf="totalNumberOfItems>0 ">showing
            <span>{{totalNumberOfItems}}</span> of {{totalMessageRecords}}</span>
    </div>


    <div class="col-lg-5" style="text-align:right">

        <p-dropdown [options]="sortoptions" [(ngModel)]="selectedSortOption" [style]="{'width':'80px', 'cursor': 'default'}">


            <ng-template let-sortoption pTemplate="item">
                <div class="ui-helper-clearfix" style="position: relative;height:25px;">

                    <div style="font-size:14px;float:right;margin-top:4px" (click)="getSortByOption(sortoption.value.code)">{{sortoption.label}}</div>
                </div>
            </ng-template>

        </p-dropdown>
    </div>
</div>



<div id="listText">
    <ul class="nav nav-tabs" style="padding-top: 5px">
        <li *ngFor="let facet of facets;" showDelay="1000" [pTooltip]="facet.type" tooltipPosition="top" style="cursor: default; background-color:#F5F5F5"
            [ngClass]="{'active': facet.items  }" class="active">
            <a style="cursor: default" (click)="searchFacetByTypeCacheId(facet.type)">{{facet.type | facetType}}</a>
        </li>

    </ul>

    <div class="message-list" id="{{i}}" tabindex="0" *ngFor="let message of messages;  let i=index" [focused]="i === activeIndex"
        (click)="onAddtoMessage(message); activeIndex = i" [ngClass]="{'message-list-checked' : message.checked === true,  'message-list-active': activeIndex === i  }"
        (blur)="looseFocus()" (focus)="setFocus()">
        <div class="row">
            <div class="col-lg-1">
                <input type="checkbox" name="messages" value="message" [(ngModel)]="message.checked" (ngModelChange)="changedCheckbox()">
                <label for="{{message.id}}"></label>
            </div>
            <div class="col-lg-11">
                <div class="row">
                    <div class="col-lg-8">
                        <td class="subjectText">
                            <span style="font-size: 13px; cursor:default">{{message.sender.name | capitalize}} </span>
                        </td>
                    </div>
                    <div class="col-lg-4 text-right">
                        <span class="category_badge_0" pTooltip="Grade Category: 1" showDelay="500" hideDelay="500">{{message.gradeCategory}}</span>

                        <i *ngIf="(message.numberAttachments)>0" class="fa fa-paperclip" aria-hidden="true" showDelay="500" hideDelay="500" pTooltip="Attachments: {{message.numberAttachments}}"
                            tooltipPosition="top"></i>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-8">
                        <div class="row">
                            <div class="col-lg-6">
                                <td class="subjectText">
                                    <span style=" font-size: 10px; color: grey;  cursor:default">Subject: {{message.subject}}</span>
                                </td>
                            </div>

                            <div class="col-lg-6 text-right">
                                <ng-template ngFor let-messageTag [ngForOf]="message.tagTypes ">
                                    <span class="tags_badge_1" class="tags_badge_1" showDelay="500" hideDelay="500" pTooltip="{{messageTag.description}}" tooltipPosition="top"
                                        [ngStyle]="  messageTag?.tagColor && {'background-color': messageTag.tagColor  } || !messageTag?.tagColor && {'background-color': 'transparent', 'border': '1px solid grey' , 'color': 'black'}"
                                        showDelay="500" hideDelay="500" tooltipPosition="top">{{ messageTag.tagCount}}
                                    </span>
                                </ng-template>


                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 text-right">
                        <span style=" font-size: 9px;  cursor:default">{{message.timeReceived}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<p-paginator rows="25" totalRecords="{{totalMessageRecords}}" [rowsPerPageOptions]="[25,50,150,250]" (onPageChange)="paginate($event)"></p-paginator>

[专注]指令

import {Directive, Input, Renderer, ElementRef} from '@angular/core'

@Directive({
  selector: '[focused]'
})
export class FocusedDirective {
  @Input()
  set focused(value: boolean){
    if(value){
      this.renderer.invokeElementMethod(this.elementRef.nativeElement, 'scrollIntoViewIfNeeded');
    }
  }

  constructor(private elementRef: ElementRef, private renderer: Renderer){}
}

Answer 1

我通过将IE的文档模式强制为11或Edge解决了这个问题。

将<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />放在index.html的标题中

Angular 4 ERROR TypeError：无法在IE中获取未定义或空引用的属性“apply”

1 个答案: