Question

我正在使用Angular 6，并且按照此Guide中的步骤向我的项目添加了材料组件。但是当我在代码中使用stepper组件时，在控制台中出现以下异常：

NewReqComponent.html:16 ERROR TypeError: _this._driver.validateStyleProperty is not a function
at browser.js:844
at Array.forEach (<anonymous>)
at browser.js:843
at Array.forEach (<anonymous>)
at AnimationAstBuilderVisitor.push../node_modules/@angular/animations/fesm5/browser.js.AnimationAstBuilderVisitor._validateStyleAst (browser.js:840)
at AnimationAstBuilderVisitor.push../node_modules/@angular/animations/fesm5/browser.js.AnimationAstBuilderVisitor.visitStyle (browser.js:780)
at AnimationAstBuilderVisitor.push../node_modules/@angular/animations/fesm5/browser.js.AnimationAstBuilderVisitor.visitState (browser.js:678)
at browser.js:657
at Array.forEach (<anonymous>)
at browser.js:655

我使用了这样的组件：

<mat-horizontal-stepper>
  <mat-step label="step1">step1</mat-step>
  <mat-step label="step2">step2</mat-step>
</mat-horizontal-stepper>

和app.module.ts：

imports: [
  BrowserModule,
  BrowserAnimationsModule,
  RouterModule.forRoot(appRoutes) ,
  FormsModule, HttpClientModule ,
  FormWizardModule ,
  ArchwizardModule,
  MatStepperModule
],

Answer 1

似乎在角度版本和材料版本之间不匹配。请确保将角度更新为最新。

尝试将其设置为6.0.6版本，我认为它将正常工作。

Answer 2

请注意，您项目的完整源代码可能允许某人帮助更快地调试此问题。同时，以下内容可以帮助您使用Angular 6和Material Stepper。

cRAN在评论中发布的StackBlitz演示是一个不错的垂直步进演示。由于您的问题似乎与水平步进有关，因此我认为您可能会发现水平演示也很有帮助。

我能够使Angular Material Stepper与Angular 6.0.3和Angular Material 6.2.1一起使用。以下是我根据Faisal基于StackBlitz项目创建的实时演示，该演示使用在另一个SO问题中引用的Angular 4：Angular 4 & Material Stepper

为此，我创建了一个全新的Angular 6项目，然后根据Angular 6在Faisal的演示中添加了关键文件，例如将所有“ md-”引用更新为“ mat-”，此外还为角CDK和角材料。

我希望有人能对此有所帮助。

StackBlitz: angular603-material621-stepper

Answer 3

您需要升级Angular.json。运行这些命令即可。

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

Answer 4

npm install @ angular / animations @ 6.0.1 --save --save-exact

编辑：没关系，发现我使用的Ionic版本仍然使用Angular 6，这意味着动画模块需要匹配角度核心模块的版本号。如果您的核心模块是6.0.1版，则需要使用npm安装@ angular / animations @ 6.0.1

角度为6的材质步进器不起作用[在browser.js中找不到动画方法]

4 个答案: