Как изменить пользовательское сообщение об ошибке в раскрывающемся списке - PullRequest
Новая
       45

Как изменить пользовательское сообщение об ошибке в раскрывающемся списке

1 голос
/ 11 марта 2020

Попытка показать пользовательское сообщение об ошибке, но не работает. По умолчанию отображается «Записи не найдены», если вы вводите несоответствующий текст. Я хочу заменить это «Записи не найдены» вместо того, чтобы показать «Нет совпадений, попробуйте еще раз». Как переписать это сообщение об ошибке в раскрывающемся списке.

Демонстрация: 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();
 }
 }

1 Ответ

0 голосов
/ 13 марта 2020

p-dropdown имеет свойство перезаписывать текст по умолчанию для отображения, когда фильтрация не возвращает никаких результатов, имя свойства emptyFilterMessage

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

, вы можете проверить все свойства

...