wake-up-neo.com

Materialstepper mit Winkel 6 funktioniert nicht [Animationsmethode in browser.js nicht gefunden]

Ich verwende Angular 6 und habe die materiellen Komponenten zu meinem Projekt hinzugefügt, indem ich die Schritte in diesem Guide befolge. Wenn ich jedoch die Stepper-Komponente in meinem Code verwende, erhalte ich die folgende Ausnahme in der Konsole:

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

Ich habe die Komponente so verwendet:

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

und die app.module.ts:

imports: [
  BrowserModule,
  BrowserAnimationsModule,
  RouterModule.forRoot(appRoutes) ,
  FormsModule, HttpClientModule ,
  FormWizardModule ,
  ArchwizardModule,
  MatStepperModule
],
angularangular-materialangular-material2angular6
9
أسامة حمدان

Es scheint, dass es ein Missverhältnis zwischen der Winkelversion und der Materialversion gibt.

versuchen Sie es auf Version 6.0.6 zu setzen und ich denke, es wird gut funktionieren.

7
mohammad

Beachten Sie, dass der vollständige Quellcode Ihres Projekts jemandem helfen kann, dieses Problem schneller zu beheben. In der Zwischenzeit können die folgenden Punkte Ihnen helfen, mit Angular 6 und dem Material Stepper zu arbeiten.

Die StackBlitz-Demo von cRAN in den Kommentaren ist eine Nice-Stepper-Demo. Da es sich bei Ihrer Frage um einen horizontalen Stepper handelt, könnte Ihnen eine horizontale Demo hilfreich sein.

Ich konnte den Angular Material Stepper mit Angular 6.0.3 und Angular Material 6.2.1 arbeiten lassen. Das Folgende ist eine Live-Demo, die ich basierend auf dem StackBlitz-Projekt von Faisal erstellt habe und die Angular 4 verwendet, auf die in einer anderen SO - Frage verwiesen wird: Angular 4 & Material Stepper

Zu diesem Zweck habe ich ein brandneues Angular 6-Projekt erstellt und dann in Schlüsseldateien von Faisals Demo zu Angular 6 hinzugefügt, z. B. das Aktualisieren aller "md-" -Referenzen auf "mat-" sowie Live-Versionsnummern für Angular CDK und Winkelmaterial.

Ich hoffe jemand findet das hilfreich.

StackBlitz: angle603-material621-stepper

1
RJLyders

sie müssen Angular.json aktualisieren. Führen Sie diese Befehle aus und fertig.

$ ng update @angular/cli
$ ng update @angular/core
$ ng update @angular/material
1
Javid Abdullayev

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

Edit: Nevermind, fand heraus, dass die Version von Ionic I noch Angular 6 verwendet. Das Animationsmodul muss also mit der Versionsnummer des Winkelkernmoduls übereinstimmen. Wenn Ihr Kernmodul die Version 6.0.1 ist, müssen Sie @ angle/animations @ 6.0.1 mit npm installieren

0
Vijay Chauhan