angular - Angular 8错误-无法读取未定义的属性 'toString'

Question

加载我的Angular应用时出现以下错误。

没有在应用程序中使用任何奢侈的东西，但是我在使用Angular Animations(browseranimationsmodule)和bootstrap进行样式设置。很难追溯到此，因为错误路径会导致browser.js文件中的代码很深。我可以刷新该应用程序，它将在大约每三个尝试中正确加载一次。该错误随机指向3个不同组件(app-person/action/adverb组件)的代码行。有时一个，有时另一个，有时加载会很好。这些是简单的组件，除了存储使用字符串插值显示值的小组件外，其他功能不多。但是，它们确实包含动画状态。当应用实际加载时，它似乎可以正常运行。以下是其中一个组件的内容，除属性名称外，其他两个组件几乎相同。包含了app-person组件的代码，并且位于app.component.html文件中。不一致和缺乏具体措辞使我无法接受。

任何见解或解决方案的起点将不胜感激。我已经阅读了有关使用ngDefaultControl和大量其他内容的类似解决方案...但是似乎没有什么可以补救的。我正在使用 Angular 动画，我怀疑这可能是此问题的一部分.....但是一切都可以在动画中正常工作，直到应用程序变得更复杂为止。

错误

 ERROR TypeError: Cannot read property 'toString' of undefined
    at styles.forEach.styleData (browser.js:1493)
    at Array.forEach (<anonymous>)
    at AnimationAstBuilderVisitor._makeStyleAst (browser.js:1475)
    at AnimationAstBuilderVisitor.visitStyle (browser.js:1436)
    at AnimationAstBuilderVisitor.visitState (browser.js:1273)
    at name.toString.split.forEach.n (browser.js:1245)
    at Array.forEach (<anonymous>)
    at metadata.definitions.forEach.def (browser.js:1239)
    at Array.forEach (<anonymous>)
    at AnimationAstBuilderVisitor.visitTrigger (browser.js:1228)

app.component.html中的HTML被错误突出显示

<div class="row threeItemsRow">

<div class="col-xs-4">
  <app-person [tempPerson]='tempPerson' [personFade]='personFade' [user]='user'></app-person>
</div>
<div class="col-xs-4">
  <app-action [tempAction]='tempAction' [actionFade]='actionFade'></app-action>
</div>
<div class="col-xs-4">
  <app-adverb [tempAdverb]='tempAdverb' [adverbFade]='adverbFade'></app-adverb>
</div>

适用于.person的.ts文件

import { Component, Input, OnInit,AfterViewChecked,HostBinding } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
import { HttpClient } from '@angular/common/http';
import { getCurrencySymbol } from '@angular/common';

const colors = ['yellow','green','blue','orange','black','red','purple','lightblue','lightgreen'];

@Component({
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.css'],
  animations:[
    trigger('fadeInPerson', [
    state('new',style({
      fontSize:'21px',
      color:colors[Math.floor(Math.random()*10)],
      opacity:0.8,
      textAlign:'center'
    })),
    state('old',style({
      fontSize:'32px',
      color:colors[Math.floor(Math.random()*10)],
      opacity:1.0,
      textAlign:'center'
    })),
    transition('new => old', [
      animate('1s')
    ]),
    transition('old=> new', [
      animate('1s')
    ]),
  ])
  ]
})

export class PersonComponent implements OnInit{

  @Input() tempPerson: string;
  @Input() personFade:any;
  @Input() user:any;
  userNouns:any;

constructor(private http:HttpClient) {}

ngOnInit(){
 }   
}

应用程式人的HTML

<p [@fadeInPerson]="personFade ? 'new' : 'old'" class="itemText">{{tempPerson}}</p>

适用于应用程序人员的CSS

.itemText{
  font-size:35px;
  transition: 1s linear all;  
  opacity: 1;
}

Answer 1

您应该检查一下:

color:colors[Math.floor(Math.random()*10)]

由于我看到您的数组的长度是9而不是10，如果选择了第十个位置，则可以不确定，请更改为:

color:colors[Math.floor(Math.random() * colors.length)]