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

Question

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

没有在应用程序中使用任何奢侈的东西，但我正在使用 Angular 动画 (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)

HTML 在 app.component.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>

.ts 文件为 app-person

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 for app-person

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

CSS for app-person

.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)]

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

Angular 8 error - cannot read property 'toString' of undefined

angular

typescript

syntax-error

tostring

angular-animations

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

Angular 8 error - cannot read property 'toString' of undefined

angular

typescript

syntax-error

tostring

angular-animations

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