Angular 8 错误 - 无法读取未定义的属性“toString”答案

【问题标题】：Angular 8 error - cannot read property 'toString' of undefinedAngular 8 错误 - 无法读取未定义的属性“toString”
【发布时间】：2020-03-28 03:52:44
【问题描述】：

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

在应用程序中没有使用任何奢侈的东西，但我使用 Angular Animations (browseranimationsmodule) 和 bootstrap 进行样式设置。很难追溯这一点，因为错误路径会导致 browser.js 文件中的代码很深。我可以刷新应用程序，它会在每三次尝试中正确加载一次。错误随机指向 3 个不同组件（app-person/action/adverb 组件）的代码行。有时一个，有时另一个，有时它会加载正常。这些都是简单的组件，除了存储一个

使用字符串插值来显示值。然而，它们确实包含动画状态。当应用程序实际加载时，它似乎运行正常。以下是其中一个组件的内容，除了属性名称外，其他两个几乎相同。包含 app-person 组件的代码以及它在 app.component.html 文件中的位置。前后不一致和缺乏具体的措辞让我感到厌烦。

任何解决问题的见解或起点将不胜感激。我已经阅读了有关使用 ngDefaultControl 和大量其他内容的类似解决方案……但似乎没有任何补救措施。我正在使用角度动画，我怀疑这可能是这个问题的一部分....但是动画一切正常，直到应用程序中的事情变得更加复杂。

错误

 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>

app-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;
}

【问题讨论】：

标签： angular typescript syntax-error tostring angular-animations

【解决方案1】：

你应该检查你的：

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

由于我看到您的数组的长度是 9 而不是 10，如果选择了第十个位置，它可能是未定义的，更改为：

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

【讨论】：