#angular #primeng
#угловой #примерг
Вопрос:
Я работаю с PrimeNG для фильтрации столбцов в моей p-таблице.
Я p-multiSelect вложил внутри a p-ColumnFilter .
Фильтрация работает должным образом, однако функция поиска внутри p-multiSelect всегда возвращается no results found .
Вот мой код шаблона:
lt;th class="table-header-primary" [ngStyle]="{'width':'200px'}" [pSortableColumn]="'docCategory'"gt;Type lt;p-columnFilter class="p-ml-auto" type="text" field="doctypeLabel" matchMode="in" display="menu" [showApplyButton]="false" [showMatchModes]="false" [showOperator]="false" [showAddButton]="false"gt; lt;ng-template pTemplate="filter" let-value let-filter="filterCallback"gt; lt;p-multiSelect [(ngModel)]="doctypeLabel" [options]="_doctypeLabelList" placeholder="Select" (onChange)="filter($event.value)"gt; lt;/p-multiSelectgt; lt;/ng-templategt; lt;/p-columnFiltergt;lt;/thgt; Вот мой соответствующий файл машинописного текста:
_doctypeLabelList:any[]=[]; doctypeLabel:any=""; constructor() { } Я приложил две фотографии, которые, надеюсь, прояснят мою проблему.
Мой выпадающий список множественного выбора, заполненный соответствующими полями из _doctypeLabelList :
Как только я попытаюсь найти соответствующие значения в выпадающем списке:
Я пытался связать в одну сторону doctypeLabel , но это не сработало. В _doctypeLabelList раскрывающемся списке «Параметры» отображается нормально, просто при поиске в строке ввода всегда сразу же появляется результат no results found . Я действительно не знаю, что еще можно попробовать. Я снова и снова просматривал документацию PrimeNG и не нашел никаких результатов. Пример в документации был довольно простым вариантом использования, поэтому мне интересно, влияет ли это каким p-columnFilter -то образом на мое p-multiSelect .
Комментарии:
1. как выглядит _doctypeLabelList?, вы пробовали использовать
filterByсвойство, когда включена фильтрация, filterBy решает, по какому полю или полям (разделенным запятыми) выполнять поиск.2. Привет, Денес, спасибо, что связался. _doctypeLabelList выглядит так, как и должно быть, в нем есть все соответствующие значения, которые заполняют выпадающий список опций. Я использовал [filterBy] = «doctypeLabel», и это, к сожалению, не сработало. Я чувствую, что мне не хватает какой-то простой детали, но ни за что на свете не могу понять, что это может быть.
3. Я имею в виду, какую структуру имеет ваш _doctypeLabelList. Имеет свойство «ярлык»?. По умолчанию параметры primeng имеют следующую структуру. свойство «метка» и свойство «значение». Если ваши параметры не имеют такой структуры, вы должны указать ее
4. Ваше право, я только что обнаружил это. Параметры должны быть привязаны к массиву SelectedItem, но мой-это просто обычная строка[ ]. Мне кажется очень громоздким и дорогостоящим изменять каждый массив в соответствии со свойством «метка» и «значение». Есть ли способ обойти это? Если бы мой _doctypeLabelList был : [«Майк», «Стив», «Марк», «Микки»], как бы это работало?
5. Верно, теперь я это понимаю. Они должны обновлять документацию до тех пор, пока это не будет исправлено. Я смог заставить его работать после переноса моего строкового массива в {label: val, значение: val}
Ответ №1:
Для того, чтобы использовать функцию поиска в p-multiselect, вам необходимо установить свойство [OptionValue]. Используйте его для различения опций.
lt;p-multiSelect [(ngModel)]="doctypeLabel" [options]="_doctypeLabelList" placeholder="Select" [filter]="true" optionValue="id" (onChange)="filter($event.value)"gt; lt;/p-multiSelectgt;