如何更改 primeng 下拉菜单中的自定义错误消息

Question

尝试显示自定义错误消息但未显示 working.It 如果您键入不匹配的文本，则显示默认 "No records found"。我想替换这个 "No records found" 而不是我想显示 "No Matched please try again"。如何在启动下拉菜单中覆盖此错误消息。

演示：https://stackblitz.com/edit/primeng-dropdown-csveyy?file=app/app.component.html

app.component.ts:

import { Component, ViewChild } from '@angular/core';
import { SelectItem, Dropdown } from 'primeng/api';

@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
name = 'Angular 5';

cars: SelectItem[];
selectedCar: string = 'BMW';

counter = 0;

@ViewChild('dd') dropdown: Dropdown;

constructor() {
this.cars = [

        {label: "(TODO)", value: "(TODO)"},
        {label: "ción descripción bien pero bien larga para ver como se muestra en la lista 1", value: "ción"},
        {label: 'Audi descripción bien pero bien larga para ver como se muestra en la lista 2', value: 'aAudi'},
        {label: 'BMW descripción bien pero bien larga para ver como se muestra en la lista 3', value: 'bBMW'},
        {label: 'Fiat descripción bien pero bien larga para ver como se muestra en la lista 4', value: 'cFiat'},
        {label: 'Ford', value: 'dFord', disabled: true},
        {label: 'Honda', value: 'eHonda'},
        {label: 'Jaguar', value: 'fJaguar'},
        {label: 'Mercedes', value: 'gMercedes'},
        {label: 'Renault', value: 'hRenault valor largo'},
        {label: 'VW', value: 'iVW'},
        {label: 'Volvo', value: 'jVolvo'},
        {label: 'a b', value:"ala"},
        {label: 'a c', value:"ola"}
    ];
  }

OnChange(ev) {
//console.log("OnChange", ev);
//console.log("OnChange", this.dropdown.panelVisible);

if (this.dropdown.panelVisible && this.counter == 0) {
  this.counter = 1;
  setTimeout(() => {
    this.CheckClosePanel();
  }, 100);
}
 }

  OnFocus() {
  console.log("OnFocus");
 }
  OnBlur() {
  console.log("OnBlur");
  }

 CheckClosePanel() {
 //console.log("CheckClosePanel");
 if (this.dropdown.panelVisible) {
  ++this.counter;
  setTimeout(() => {
    this.CheckClosePanel();
  }, 100);
  }
  else {
  console.log("CheckClosePanel - counter:", this.counter, " select:", this.selectedCar);
  this.counter = 0;
 }
  }

 MyItemClick(event) {
console.log("MyItemClick", event);
console.log(event.target.innerText);
if (event.target.classList.contains('disabled')) {
  event.stopPropagation();
}
}

MyKeydown(event) {
console.log("MyKeydown", this.dropdown.selectedOption.disabled);
if (this.dropdown.selectedOption.disabled) {
  event.stopPropagation();
  event.preventDefault();
}
}

MyKeydownEnter(event) {
console.log("MyKeydownEnter", this.dropdown.selectedOption.disabled);
if (this.dropdown.selectedOption.disabled) {
  event.stopPropagation();
  event.preventDefault();
}
}

 OnClickDisabled() {
 console.log("OnClickDisabled");
event.stopPropagation();
 }
 }

Answer 1

p-dropdown 有一个属性来覆盖当过滤没有 return 任何结果时要显示的默认文本，属性的名称是 emptyFilterMessage

<p-dropdown #dd
  emptyFilterMessage="No Matched please try again" 
  [options]="cars"
  [(ngModel)]="selectedCar"
  [style]="{'width':'100%'}"
  .....
>
</p-dropdown>

你可以检查所有 properties

如何更改 primeng 下拉菜单中的自定义错误消息

How to change custom error message in primeng dropdown

angular8

primeng

primeng-dropdowns