«обрезка» неопределенного TypeError в приложении Angular, когда я нигде не вызываю обрезку

avatar
RileyMcLain
1 июля 2021 в 17:02
449
4
1

В настоящее время я пытаюсь изучить 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>

А вот мой ТС:

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. Любые мысли о том, что происходит не так? Кнопка работает как положено, за исключением этой ошибки всякий раз, когда я нажимаю на нее.

Спасибо!

Источник
Brian Smith
1 июля 2021 в 17:05
1

Следуйте по следу ошибки. Ошибка возникла из-за primeng-dom.js:19

Harikrishnan S
1 июля 2021 в 17:14
0

Попробуйте удалить директиву Button из консоли, я надеюсь, что это что-то вокруг этой кнопки.

Markus Pscheidt
18 октября 2021 в 09:39
0

Исправлено в Primeng 12.2.1: github.com/primefaces/primeng/issues/10719

Ответы (4)

avatar
RileyMcLain
8 июля 2021 в 04:22
0

Оказывается {{word}}, так как метка кнопки сломала вещи!

Очевидно, я не могу динамически менять названия кнопок...

avatar
Markus Pscheidt
11 октября 2021 в 08:57
0

Используйте p-button вместо:

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

См. запись на форуме

avatar
Mher Arsh
11 августа 2021 в 21:58
2

была такая же проблема, решение нашел на официальном форуме, для того чтобы исправить ошибку нужно добавить -> icon="pi"

   <button
        icon="pi"
        type="button"
        pButton
        [label]="(documentsCount$ | async)?.toString()"
    ></button>
Markus Pscheidt
11 октября 2021 в 08:46
0

Запись на форуме такая: forum.primefaces.org/viewtopic.php?t=67536

avatar
nd10
1 июля 2021 в 18:54
0

Эта ошибка вызвана не вашим кодом, а используемым вами пакетом (в данном случае PrimeNg). Кажется, что метод ожидает некоторого ввода, который он не получает. Попробуйте передать '$event' в методе click и обработайте его в файле ts.

(click)="buttonPress($event)"

В качестве идеальной реализации используйте предопределенный элемент кнопки, предоставляемый PrimeNg.