Material-UI下拉菜单导致IE11中的错误

时间:2018-08-21 10:42:16

标签: internet-explorer-11 material-ui angular6

不幸的是,我们必须支持IE11。

以下是我们应用中的Angular片段:

<nav class="navbar-menu" fxFill>
    <span class="fill-it"></span>
    <span class="nav-user-wrap" fxFlexAlign="right">
        <button class="nav-user" mat-button [matMenuTriggerFor]="usrmenu">{{ userManager.currentDealer?.name }} <mat-icon class="icon-avatar">person</mat-icon><mat-icon class="icon-arrwdwn">keyboard_arrow_down</mat-icon></button>
        <mat-menu #usrmenu="matMenu" class="userdd mmdd" xPosition="after" yPosition="below" [overlapTrigger]="false">
            <span mat-menu-item [disabled]="true" [disableRipple]="true">{{ userManager.firstName }} {{ userManager.lastName }}</span>
            <mat-divider style="border-color: rgba(255,255,255,0.8); margin: 0 16px;"></mat-divider>

            <span mat-menu-item *ngIf="!userManager.isDealerGroupUser" (click)="openSelectDealerGroupDialog()">{{ userManager.dealerGroup?.name }}</span>
            <mat-divider *ngIf="!userManager.isDealerGroupUser" style="border-color: rgba(255,255,255,0.8); margin: 0 16px;"></mat-divider>

            <button *ngFor="let dealer of userManager.dealers" (click)="userManager.setCurrentDealer(dealer.id)" mat-menu-item>{{ dealer.name }} <span *ngIf="dealer.id === userManager.defaultDealer?.id">(Default)</span></button>

            <mat-divider style="border-color: rgba(255,255,255,0.8); margin: 0 16px;"></mat-divider>
            <!-- <button mat-menu-item>My Account</button>
            <button mat-menu-item>Settings</button> -->
            <button mat-menu-item (click)="logOut()">Logout</button>
        </mat-menu>
    </span>
</nav>

相当标准的下拉菜单,但是在IE11中,单击按钮将出现以下异常:

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

我正在拔头发试图找出原因。 IE11是否会在后台执行某种伪脚本操作来设置CSS或其他内容?不知道。

感谢所有帮助!

2 个答案:

答案 0 :(得分:1)

此错误是由于IE11缺少Web Animation API而导致的,要解决此问题,您必须按照Angular Docs中的说明导入正确的polyfill。

import 'web-animations-js'

答案 1 :(得分:0)

角度文档说,如果您使用AnimationBuilder,则仅需要IE的“ web-animations-js” polyfill,但我的项目却没有使用AnimationBuilder,并且收到此错误消息。我正在使用的一种库可能会这样做。但是,我升级到Angular 8后才开始出现此错误。