Question

为什么Angular 5会抛出此错误？

AppComponent.html:2 ERROR TypeError: Cannot read property 'forEach' of undefined

我正在研究Angular动画的概念验证，并且我直接使用网站上的代码。我的组件如下所示：

import { Component, OnInit } from '@angular/core';
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';

@Component({
  selector: 'app-obj-list',
  templateUrl: './obj-list.component.html',
  styleUrls: ['./obj-list.component.css'],
    animations: [

    trigger('myAwesomeAnimation', [
        state('small', style({
            transform: 'scale(1)',
        })),
        state('large', style({
            transform: 'scale(1.2)',
        })),
    ]),
    transition('small => large', animate('100ms ease-in'))

    ]
})
export class ObjListComponent implements OnInit {
  state = 'small';
  constructor() { }
  animateMe() {
     this.state = (this.state === 'small' ? 'large' : 'small');
       }

  ngOnInit() {
  }

}

错误引用的代码行只是包含我的组件的标记：<app-obj-list></app-obj-list>

我已将其缩小到上述文件中的一行：transition('small => large', animate('100ms ease-in'))

当我删除该行时，错误就会消失。当我离开时，我收到错误：

AppComponent.html:2 ERROR TypeError: Cannot read property 'forEach' of undefined
    at new AnimationTrigger (browser.js:3017)
    at buildTrigger (browser.js:3005)
    at InjectableAnimationEngine.AnimationEngine.registerTrigger (browser.js:5504)
    at eval (animations.js:291)
    at Array.forEach (<anonymous>)
    at AnimationRendererFactory.createRenderer (animations.js:290)
    at DebugRendererFactory2.createRenderer (core.js:15075)
    at createComponentView (core.js:13633)
    at callWithDebugContext (core.js:15041)
    at Object.debugCreateComponentView [as createComponentView] (core.js:14370)

我的app.module有BrowserAnimationsModule，所以不应该是这个问题：

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { ObjListComponent } from './obj-list/obj-list.component';


@NgModule({
  declarations: [
    AppComponent,
    ObjListComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我尽可能地密切关注angular site上的代码。有人能告诉我我忘了什么吗？有遗漏吗？我需要下载一个包吗？我是Angular和Angular动画的新手，我似乎无法解决这个问题。

Answer 1

如果仔细观察教程，那么＆＃34;过渡＆＃34;动画的属性需要在＆＃34;触发＆＃34;：

的数组中

animations: [
    trigger('myAwesomeAnimation', [
        state('small', style({
            transform: 'scale(1)',
        })),
        state('large', style({
            transform: 'scale(1.2)',
        })), 
        transition('small => large', animate('100ms ease-in'))
    ]) // close the array after the transition
]

为什么Angular 5 Transition会抛出AppComponent.html：2 ERROR TypeError：无法读取属性＆＃39; forEach＆＃39;未定义的

1 个答案: