Angular 应用程序中未定义的类型错误的"修剪"，当我不在任何地方调用修剪时

Question

我目前正在尝试学习Angular，在研究我的一些想法时，我在Chrome的开发控制台中遇到了以下错误：

ERROR TypeError: Cannot read property 'trim' of undefined
at Function.addMultipleClasses (primeng-dom.js:19)
at ButtonDirective.createIconEl (primeng-button.js:59)
at ButtonDirective.setIconClass (primeng-button.js:78)
at ButtonDirective.set label [as label] (primeng-button.js:92)
at setInputsForProperty (core.js:10940)
at elementPropertyInternal (core.js:9984)
at ɵɵpropertyInterpolate1 (core.js:15551)
at Module.ɵɵpropertyInterpolate (core.js:15514)
at CmsComponent_Template (cms.component.html:12)
at executeTemplate (core.js:9579)

这是我的HTML:

<h1>Angular Router App</h1>
<!-- This nav gives you links to click, which tells the router which route to use (defined in the routes constant in  AppRoutingModule) -->
<nav>
<ul>
<li><a routerLink="/login" routerLinkActive="active">/login</a></li>
<li><a routerLink="/" routerLinkActive="active">/</a></li>
</ul>
</nav>
<button type="button"
pButton
label="{{word}}"
(click)="buttonPress()">
</button>
<!-- The routed views render in the <router-outlet>-->
<router-outlet></router-outlet>

这是我的TS：

import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-landing',
templateUrl: './cms.component.html',
styleUrls: ['./cms.component.scss']
})
export class CmsComponent implements OnInit {
private onWord: number = 0;
private words: Array<string> = ["One","Two","Three","Two"];
public word: string = this.words[this.onWord];
constructor(
) { }
ngOnInit(): void {
}
public buttonPress(): void {
// Bumps the index
this.onWord++;
// Keeps the value in the proper range
if (this.onWord >= this.words.length) {
this.onWord = 0;
}
// Updates the word to the new index
this.word = this.words[this.onWord];
console.log("The button is now on " + this.word);
}
}

我正在使用Angular和Typescript。有什么想法吗？这个按钮的功能和预期的一样，除了每当我点击它时出现的错误

谢谢！

Answer 1

也是同样的问题，我在官方论坛上找到了一个解决方案，为了修复您需要添加的错误->icon＝"；pi"；

<button
icon="pi"
type="button"
pButton
[label]="(documentsCount$ | async)?.toString()"
></button>

Answer 2

这不是您的代码生成的错误，而是您正在使用的包(在本例中为PrimeNg(中的错误。该方法似乎期望得到一些没有得到的输入。尝试在click方法中传递"$event"，并在ts文件中处理它。

(click)="buttonPress($event)"

作为一种理想的实现方式，可以使用PrimeNg提供的预定义按钮元素。

Answer 3

原来{{word}}作为按钮标签破坏了一切！

显然，我不能动态更改按钮标签。。。

Answer 4

改用p-button：

<p-button
label="{{word}}"
(onClick)="buttonPress()">
</p-button>

查看论坛条目