首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Angular 4 ERROR TypeError:无法获取IE中未定义或null引用的属性'apply‘

Angular 4 ERROR TypeError:无法获取IE中未定义或null引用的属性'apply‘
EN

Stack Overflow用户
提问于 2018-01-25 18:34:46
回答 1查看 3K关注 0票数 1

我只在IE11中得到了以下错误,我做了很多搜索,并且我已经取消了对所需的多边形填充的注释,但仍然得到一个错误。而且,当我删除组件时,似乎在一个使用API的组件中得到了错误,它工作正常。所以我错过了什么?

似乎问题出在focused="i === activeIndex“上,当我删除它时,它能正常工作吗??但是为什么呢?

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

focused指令

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){}
}
EN

回答 1

Stack Overflow用户

发布于 2018-06-27 05:06:29

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

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/48440766

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档