Angular 材质扩展面板错误 - TypeError: this.driver.containsElement is not a function

Posted

技术标签:

【中文标题】Angular 材质扩展面板错误 - TypeError: this.driver.containsElement is not a function【英文标题】:Angular material expansion panel error - TypeError: this.driver.containsElement is not a function 【发布时间】:2018-12-05 20:27:03 【问题描述】:

Angular 材质的扩展面板依赖于 BrowserAnimationsModule。我已经包含了动画模块,但是当我创建一个简单的扩展面板时,它会因错误而崩溃:

ERROR TypeError: this.driver.containsElement 不是函数 在 TransitionAnimationEngine.push../node_modules/@angular/animations/fesm5/browser.js.TransitionAnimationEngine._balanceNamespaceList (browser.js:2765) 在 TransitionAnimationEngine.push../node_modules/@angular/animations/fesm5/browser.js.TransitionAnimationEngine.createNamespace (浏览器.js:2743) 在 TransitionAnimationEngine.push../node_modules/@angular/animations/fesm5/browser.js.TransitionAnimationEngine.register (browser.js:2784) 在 InjectableAnimationEngine.push../node_modules/@angular/animations/fesm5/browser.js.AnimationEngine.register (browser.js:3815) 在 AnimationRendererFactory.push../node_modules/@angular/platform-b​​rowser/fesm5/animations.js.AnimationRendererFactory.createRenderer (动画.js:140) 在 DebugRendererFactory2.push../node_modules/@angular/core/fesm5/core.js.DebugRendererFactory2.createRenderer (core.js:12225) 在 createComponentView (core.js:11179) 在 callWithDebugContext (core.js:12204) 在 Object.debugCreateComponentView [as createComponentView] (core.js:11715) 在 createViewNodes (core.js:11220)

home.component.html

<div class="container-fluid">
    <div id="sidebar">
        <mat-expansion-panel>
            <mat-expansion-panel-header>
              <mat-panel-title>
                This is the expansion title
              </mat-panel-title>
              <mat-panel-description>
                This is a summary of the content
              </mat-panel-description>
            </mat-expansion-panel-header>
            <p>This is the primary content of the panel.</p>
          </mat-expansion-panel>
    </div>
    <div id="map" style="height: 550px"></div>
</div>

home.module.ts

import  NgModule  from '@angular/core';
import  CommonModule  from '@angular/common';
import  TranslateModule  from '@ngx-translate/core';

import  CoreModule  from '@app/core';
import  SharedModule  from '@app/shared';
import  HomeRoutingModule  from './home-routing.module';
import  HomeComponent  from './home.component';
import  QuoteService  from './quote.service';
import  LeafletModule  from '@asymmetrik/ngx-leaflet';
import  MatExpansionModule  from '@angular/material/expansion'

@NgModule(
  imports: [
    CommonModule,
    TranslateModule,
    CoreModule,
    SharedModule,
    HomeRoutingModule,
    LeafletModule,
    MatExpansionModule
  ],
  declarations: [
    HomeComponent
  ],
  providers: [
    QuoteService
  ]
)
export class HomeModule  

请注意,这是一个简单的 Angular 6 应用程序,使用 @angular/material 、 @angular/cdk 和 @angular/animations 安装

Angular 和包版本:

Angular CLI:6.0.7 节点:8.9.3 操作系统:win32 x64 Angular:6.0.3

@angular-devkit/architect 0.6.7 @angular-devkit/build-angular 0.6.7 @angular-devkit/build-optimizer 0.6.7 @angular-devkit/core 0.6.7 @angular-devkit/schematics 0.6.7 @angular/animations 6.0.6 @angular/cdk 6.3.1 @angular/cli 6.0.7 @angular/material 6.3.1 @ngtools/webpack 6.0.7 @schematics/angular 0.6.7 @schematics/update 0.6.7 rxjs 6.2.0 typescript 2.7.2 webpack 4.8.3

【问题讨论】:

【参考方案1】:

该版本的动画包似乎存在错误。进行临时修复并回滚到 6.0.5。它将解决您的问题,如 stackblitz 所示(您的动画版本会引发错误)。

npm install --save @angular/animations@6.0.5

如果这不能解决问题,请对有问题的软件包进行完整更新:

$ ng update @angular/cli
$ ng update @angular/core
$ ng update @angular/material

【讨论】:

刚刚修复了npm install --save @angular/animations@6.0.5 的类似问题。谢谢!!【参考方案2】:

这个错误来自最新版本的动画模块,即@angular/animations@6.0.9。 但是如果我们安装@angular/animations@6.0.5,问题就解决了。分页器和 mat-sort-header 属性都解决了这个问题。

【讨论】:

以上是关于Angular 材质扩展面板错误 - TypeError: this.driver.containsElement is not a function的主要内容,如果未能解决你的问题,请参考以下文章

如何从对象类型中动态获取值并在扩展面板角材料中实现?

Angular 材质中具有错误验证的 ControlValueAccessor

Angular 材质 Snackbar 配置与自定义 panelClass 配置,用于错误、成功、警告消息

Angular 材质树中的对象数组

Angular > 在材质表中显示列和行

我在材质上使用 angular 10,我收到了这个错误 ExpressionChangedAfterItHasBeenCheckedError: Expression has changed afte