primeng的多选组件中的事件顺序
primeng是一个基于Angular框架的UI组件库，提供了丰富的可复用组件，包括多选组件。在primeng的多选组件中，事件的触发顺序如下：
- onChange事件：当用户选择或取消选择选项时触发。可以通过监听该事件来获取用户的选择结果。
- onFilter事件：当用户在多选组件的搜索框中输入关键字时触发。可以通过监听该事件来实现自定义的搜索功能。
- onPanelShow事件：当下拉面板展开时触发。可以通过监听该事件来执行一些在展开面板时需要进行的操作。
- onPanelHide事件：当下拉面板关闭时触发。可以通过监听该事件来执行一些在关闭面板时需要进行的操作。
需要注意的是，以上事件的触发顺序是固定的，即先触发onChange事件，然后是onFilter事件，最后是onPanelShow和onPanelHide事件。
对于primeng多选组件的具体使用和更多信息，可以参考腾讯云的相关产品PrimeNG的官方文档：PrimeNG官方文档。
相关·内容
PrimeNG多选小工具具有overlayVisible属性，该属性使多选面板在小工具加载时可见。但是PrimeNG dropdown没有这样的属性来默认打开面板。
你知道怎么做吗？？尝试使用一些选项，如panelStyleClass和设置dropdown的焦点事件的面板样式，但不起作用。
浏览 2提问于2019-11-08得票数 0
我有一个primeNG多重选择(PrimeNG)作为组件库的一部分，我们将它与许多其他多选择一起添加到报表中以创建过滤器。由于升级到了角12，每当用户在报表外滚动时，过滤器就会关闭。我们希望过滤器保持开着。我已经尝试过appendTo="body" (结果是行为没有改变)和[appendTo]="container" (完全错置页面上的内容)到包含的div上，但是仍然没有达到期望的行为。现在用primeNG可以保持滚动上的覆盖打开吗？
浏览 8提问于2022-01-06得票数 2
1回答
排序素列
、、
我正在使用一个primeng表，并使用他们的切换方法的列。唯一的问题是，当您切换一个开关时，这些列会将列返回到表的末尾。我想知道是否有人知道要对它们进行排序，所以列回到了原来的位置。
我试图在我的component.ts文件中使用各种排序方法，但没有成功。
是我从PrimeNG使用的示例(可以测试和查看代码)
浏览 7提问于2019-03-01得票数 1
回答已采纳
5回答
您好，我正在开发一个Angular4应用程序，对于UI，我使用Primeng。
我有一个多选元素，它的行为与这里的非常相似
我唯一想要改变的是在下拉列表上，当"X“(关闭)按钮被点击时，我希望它清除所有的选择，而不是关闭下拉列表本身。
在primeng中有什么方法可以做到这一点吗？
感谢您的帮助！
浏览 27提问于2017-08-11得票数 0
我正在使用Angular 11的PrimeNG多选。其中一个选项标签有更长的文本。我想切片标签，如果它超过一定的长度。有谁能帮我实现这一点吗？
选项是
@Input() options: ISelectOption<number, string>[];
<p-multiSelect
#multiSelect
[options]="options"
[(ngModel)]="values"
optionLabel="name"
dropdownIcon="fas fa-caret-
浏览 62提问于2021-10-13得票数 1
1回答
我目前正在开发一个使用Angular 4，Angular Material和PrimeNG组件的用户界面。
我遇到的最新组件是来自PrimeNG的MultiSelect组件：
我只是想让组件的宽度适合父组件的100%。
编辑此组件的CSS类是否需要遵循特定的流程？文档中说对内联使用"Style“--这是不是意味着：
<p-multiSelect [options]="cars" [(ngModel)]="selectedCars" [defaultLabel]="defaultLabel" style="width: 100
浏览 6提问于2017-08-04得票数 4
回答已采纳
我想通过编程方式禁用PrimeNG表中的左键和右箭头键导航，而无需修改表组件源代码。参见这个示例：。
如果我在以下脚本中禁用/注释掉了\node_modules\primeng\fesm2015\primeng-table.js (事件)和onArrowRight(事件)事件，我尝试并成功地手动禁用了左右箭头键导航。
在使用单元格编辑的PrimeNG表中，是否有更好的方法来成功地禁用/删除/覆盖左箭头和右箭头键导航(例如，如何覆盖onArrowLeft(事件)和onArrowRight(事件)事件)？谢谢!
浏览 12提问于2022-03-09得票数 1
1回答
我正在使用PrimeNG，并将全局过滤器添加到我的表中：
<input #gb type="text" pInputText size="50" placeholder="Filter">
数据表：
<p-dataTable *ngIf="users != null && users.length > 0" [value]="users" loadingIcon="fa-spinner" [globalFilter]="gb">
我需要
浏览 2提问于2017-11-08得票数 3
回答已采纳
是否有任何解决方案使PrimeNG p-multiselect的check/uncheck元素保持绑定数组的列有序？
(实际上，当我们取消检查一个元素时，它会从数组的列中消失，但是当我们重新检查时，该列将添加到数组的末尾而不是初始索引中)
浏览 1提问于2018-05-31得票数 2
回答已采纳
我在一个角10应用程序中使用PrimeNG 10.0.3。在它中，我导入了几个PrimeNG组件并使用它们，没有问题。然而，当我尝试使用TabView模块时，我得到了error NG8001：‘p’不是一个已知的元素，以及error NG8001：‘p’不是一个已知的元素。
我创建了一个名为primng.module的模块，其中托管了所有PrimeNG导入：
import { NgModule } from '@angular/core';
import { ButtonModule } from 'primeng/button';
import { Blo
浏览 2提问于2020-11-08得票数 0
回答已采纳
1回答
我正在写一个Angular 2应用程序，我需要有一个“奇怪的”dropdownlist元素，在给定的选项上，它应该显示一个日历，类似于我在下面附加的内容：
提到我在应用程序中使用PrimeNG (来自Primefaces)可能也很重要。他们有下拉列表和日历作为组件，但我是否能够说出给定的下拉列表选项是否应该扩展到日历中？
感谢您在这方面所能提供的任何帮助或意见。
浏览 14提问于2016-08-16得票数 0
1回答
系统js映射不起作用
、、、
也许我是个哑巴，但系统js总是给我带来很多痛苦，尽管它太棒了，以至于我不想再用其他东西了。
我的系统js配置如下：
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
primeng:{
format: 'register',
浏览 2提问于2016-05-25得票数 0
我使用PrimeNG tabView组件来显示步骤，假设我有3个步骤1,2,3，并且使用handleTabViewChange(e)加载带有步骤索引的数据
相应的索引是0,1,2，步骤2带有一个条件，当它没有显示时，我有2步1,3和索引0,1，所以第3步的索引更改为1：
是否有方法为每个选项卡设置静态索引，因此当步骤2未显示时，步骤3的索引将保留2。
<p-tabView (onChange)="handleTabViewChange($event)">
<p-tabPanel header="Step 1" >
<
浏览 0提问于2021-08-18得票数 2
回答已采纳
我是angular2/primeng的新手。
如何在数据表中显示primeng上下文菜单，而不是默认的右键单击？
谢谢
浏览 2提问于2017-08-21得票数 1
我正在使用PrimeNG创建基本组件。我在组件上添加了输入框，如下所示： <input type="text" style="width:8vw"/> 如果我单独运行组件，输入框工作正常。但是，当我在基于AngularJS的应用程序中集成这个组件时，输入框上的退格键就不起作用了。其他笔画，如键输入，删除等工作良好。 附言:输入框实际上是我的primeNG表组件的过滤器。我已经尝试了在网格之外输入框，并相应地要求简单。当我集成组件时，网格也可以正确填充，但仅仅是filterbox上的退格键不起作用。
浏览 17提问于2020-04-13得票数 0
回答已采纳
我不能创建stackblitz，因为我使用的不是开源的第三方组件库。我使用的是库中的多选择组件，它非常类似于primeng的多选择组件。
下面是HTML：
<lib-multiselect [(ngModel)]="fruit" name="fruit" modelChange="multiselectModelChange">
<lib-multiselect-option (onSelectionChange)="onSelectionChange($event)" *ngFor="let f
浏览 1提问于2021-05-12得票数 0
我想在我的应用程序中使用。所以我所做的：
npm i primeng --save
然后，我将DropdownModule添加到从app.module.ts的导入中。之后，我在html中包含了以下代码：
<p-dropdown [options]="optionList" [(ngModel)]="selectionString" placeholder="Choose one"></p-dropdown>
在运行ng serve并启动localhost:4200时，我得到以下错误：
未找到./node_modules/
浏览 0提问于2018-12-21得票数 4
回答已采纳
我们一直试图将PrimeNG组件集成到JHipster (Range4)生成的项目中，但没有成功。在下载并将PrimeNG安装到我们的项目之后，我们可以导入类，但是当我们将相应的标记包含到模板中时，什么都不会被绘制出来。我们已经测试了几个PrimeNG组件。此外，我们在app.module中完成了导入，等等。我希望更具体一些，但是在任何地方都不会显示错误。您对如何与PrimeNG和JHipster一起工作有任何提示吗？谢谢
浏览 7提问于2017-05-24得票数 13
回答已采纳
我尝试使用primeng multiselect(angular 7)默认选择一个选项。默认情况下，我可以选择一个选项，但没有选中该选项的复选框，但它出现在我选择的选项数组中。我显示的默认选项为defaultLable的标签字段的primeng多选只是为了外观和感觉。任何人都不知道我们如何才能选中默认选中选项的复选框。 我最初尝试将项放入以选择数组，然后使用defaultLable显示
浏览 36提问于2019-04-30得票数 1
我有一个Angular 6应用程序，安装了最新版本的PrimeNG (6.1.4)，并使用了一个简单的数据表。我想使用nova-light主题，但这不起作用，创建了表结构，但没有主题。我的styles.scss中有以下几行代码：
@import url("~primeicons/primeicons.css");
@import url("~primeng/resources/primeng.min.css");
@import url("~primeng/resources/themes/nova-light/theme.css");
但是:当
浏览 2提问于2018-10-02得票数 0
2回答
下面是我的代码示例。primeng多重选择是primeng下拉列表的来源：
HTML：
<p-multiSelect [options]="elements" [(ngModel)]="selectedElements" optionLabel="name" display="chip"
(onChange)="onElementChange($event)"></p-multiSelect
<p-dropdown [options]="availableElements&
浏览 1提问于2020-12-28得票数 5
回答已采纳
我不能导入原始组件使用gulpfile.js，但在哪里我可以导入其他第三方组件。
我得到了未知源错误。请帮帮忙。
我必须更改primeng.js中的路径吗？
Layout.cshtml：
<script src="js/primeui-ng-all.js"></script>
<script>
System.config({
packages: {
'app': {
format: 'register',
浏览 0提问于2016-04-19得票数 1
2回答
假设我有一个父和子组件。
<button (click)="downloadReport()">Download Report</button>
<app-child-component [reportMode]="reportMode" (onReportModeReady)="onReportModeReady">
</app-child-component>
在子组件上，我需要隐藏/显示一些PrimeNg组件
<p-datatable #dtNormal ngIf="!repo
浏览 0提问于2019-03-13得票数 0
回答已采纳
1回答
Angular 2，v.2.0.0+ PrimeNG。我会像这样实现弹出菜单：
我使用此命令-> npm install primeng --save在我的项目中安装PrimeNG，并在我的app.module.ts -> import {TieredMenuModule} from "primeng/primeng"中导入TieredMenuModule。然后我创建组件并导入MenuItem -> import {MenuItem} from 'primeng/primeng'，以及来自node_modules的所有样式(当然是在我
浏览 2提问于2017-03-10得票数 0
回答已采纳
我有一个在组件中定义了许多行的表，当按下表上的一行时，就会出现一个模式(对话框)。因此，我为对话框创建了一个单独的组件，但它无法工作。
表组件代码在这里(相关部分)
import { SwatModalComponent } from '../swat-modal/swat-modal.component';
modal: SwatModalComponent;
constructor(private alertService : AlertService) {
if(alertService.filteredParam){
//we have a
浏览 2提问于2017-01-13得票数 2
回答已采纳
我可以让JSON呈现，但不能让样式呈现。我将css链接添加到index.html文件：
<!-- #CSS Links -->
<link rel="stylesheet" type="text/css" href="../node_modules/primeng/resources/themes/bootstrap/theme.css">
<link rel="stylesheet" type="text/css" href="../node_modules
浏览 1提问于2017-04-13得票数 1
我是angular和primeNg的新手。
我有details.component.html，在我的导航栏里有一个叫做“开始会话”的按钮。我在同一个文件中也有一个<p-tabView>组件。
当我点击“启动会话”按钮时，我想要显示<p-tabView>组件。我如何才能做到这一点？
浏览 0提问于2020-09-15得票数 3
我已经以ng模块的形式组织了我的应用程序，并且正在使用primeng2组件。THe primeng2组件需要在以下每个模块中导入它们
我有两个模块
1. users modules has users component which uses datatable module(primeng2)
2. trucks modules having rtruck component which uses datatable module(from primeng2)
我的代码有很多重复，因为在我必须做的每一个模块中
imports :[DatatabeModule] //other module
浏览 3提问于2017-06-25得票数 1
我正在使用PrimeNG下拉列表和PrimeNG turbo表。我有一个列，它在编辑模式下使用下拉列表，在那里我需要根据另一列的值过滤选项。然后，我把问题描述为。
我真的找不到一种为选项使用列表而不是方法的好方法，因为这需要我为表中的每一行维护一个选项列表。
有人知道如何解决这个问题吗？
有人能给我一个更好的方法来获得我不面临这个问题的选择吗？
浏览 1提问于2018-08-07得票数 4
我正在使用PrimeNg编辑数据表。
如何为下面的示例设置自动宽度列或减少文本的下一行。
您可以在下面的primeNg链接中重现相同的行为。
<td pEditableColumn>
<p-cellEditor>
<ng-template pTemplate="input">
<input pInputText type="text" [(ngModel)]="prod
浏览 39提问于2021-02-16得票数 1
在创建了一个新组件之后，我在几乎所有的测试中都收到了这个错误： SampleComponent > should create
Failed: Component TuzGraphComponent is not part of any NgModule or the module has not been imported into your module.
Error: Component TuzGraphComponent is not part of any NgModule or the module has not been imported into your modul
浏览 34提问于2019-09-28得票数 0
1回答
可以在DataTable中自定义PrimeNG过滤器吗？我需要过滤来自p-dataTable外部或其他组件的数据，比如将过滤左舷右侧datatable的左舷(见附图)。
浏览 2提问于2017-08-24得票数 0
回答已采纳
1回答
我在我的角应用程序中有一个从PrimeNG下拉的。此下拉列表已将autofocus属性设置为true。
所以，当我打开我的组件(或对话框)--它里面有这个下拉列表--一切正常时，下拉列表有焦点，我可以按键选择选项。
但是，当我在app中的其他地方，然后回到组件的下拉(或重新打开对话框)，自动对折没有设置(我检查现在焦点是设置在文档正文)。
有没有可能解决这个问题？
浏览 0提问于2019-03-28得票数 0
回答已采纳
1回答
只是想知道当使用一个主要的NG主题，例如“Omega”.角cli配置中样式表的正确排序是什么。在主要的ng文档中列出了以下内容：
<link rel="stylesheet" type="text/css" href="YOUR_PATH/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/omega/theme.css
浏览 1提问于2017-10-11得票数 2
回答已采纳
1回答
我试图在我的角4应用程序中实现PrimeNG日历中的日期时间针刺器。我做了下面的安装。
>npm install primeng --save
module.ts
import { Calendar } from 'primeng/primeng'
component.ts
import { Calendar } from 'primeng/primeng'
Component.html
当我运行网站时，我会得到以下错误。
模板传递错误：“P-日历”不是已知的元素: 1.如果“p-日历”是一个角分量，则验证它是该模块的一部分。2.如果“p-日历”是web
浏览 1提问于2018-03-24得票数 0
当我们点击按钮时，我使用的是PrimeNG侧栏，它向右滑动并路由到子组件，在子组件中，我有带有按钮cancel的表单模板。您可以在下面找到侧栏模板。
sidebar.component.html
<p-sidebar [(visible)]="visibleSidebar2" position="right [baseZIndex]="10000">
<router-outlet name="createSidebar"></router-outlet>
</p-sidebar>
<
浏览 0提问于2018-03-26得票数 2
1回答
我在我的项目中使用primeng组件。但是我想对paginator组件的模板做一些修改。我创建了一个新组件，它扩展了paginator组件的primeng，并在@Component中添加了新的模板。但是其他一些primeng组件使用paginator组件进行分页，就像dataview一样。这些组件是否可以使用这个新的扩展版本组件？
浏览 1提问于2018-11-26得票数 0
3回答
PrimeNG数据表不工作
、、、、
我试图将PrimeNG数据表与angular2一起使用，但它似乎不起作用。我已经安装了PrimeNG和npm。在我的组件中我导入
import {DataTableModule,SharedModule} from 'primeng/primeng';
然后在模板中使用
<p-dataTable [value]="students">
<p-column *ngFor="let col of cols" [field]="col.field" [header]="col.header"&g
浏览 0提问于2016-12-02得票数 0
我正在使用PrimeNg DataTable在一个棱角应用程序上。
我想保存过滤器和当返回到组件时，恢复过滤器和显示过滤器值在col头上。
实际上我在尝试，但它不起作用
@ViewChild(DataTable) candTable: DataTable;
storeFilters(event: any) {
this._candidatureService.storeFilters(event.filters);
}
restoreFilters(){
let filtersStored = this._candidatureService.restoreFilters();
浏览 0提问于2019-01-26得票数 1
我的任务是向我们的文本编辑器实现一个提及功能。我使用的是基于羽毛笔的PrimeNg编辑器。我找到了包，它似乎可以帮助解决这个问题。我不确定如何在primeng编辑器组件中配置它。我看到有一个getQuill()函数可能会有帮助，但我不确定是如何做到的。谢谢!
我可以实际使用这个模块，并将它传递给用户等等，它更多的是允许我的编辑器使用它。
浏览 27提问于2021-02-27得票数 0
我有一个自定义组件，它获取与ngModel绑定的对象。
在组件内部，我读取了对象的数字值，并将其显示在primeng number input中。
问题是primeng number input的(ngModelChange)事件只在输入失去焦点时触发。
在我们的应用程序中，这是一个问题，因为我们通常使用keyup.enter跳转到不同的输入。当使用keyup.enter时，输入没有失去焦点，因此ngModel没有改变。
我已经为组件构建了一个方法，它首先使输入失去焦点。这在更改ngModel时非常有效。然后，我们将ngModel设置为null以清除输入，但这只在第一次有效。
第二次时，该值只
浏览 3提问于2020-09-23得票数 0
4回答
我在primeng组件中看到，使用类似于ngModel (双向数据绑定)样式的一些属性，如以下所示
[(selection)]="selectedItem";
看起来就像
@Input() selection;
@Output() selection:EventEmitter<any> = new EventEmitter<any>();
我如何才能实现这样的东西，它是否有可能做更多的单一属性，如
<component-a [(selection)]="selectedItem" [(data)]="selectedD
浏览 2提问于2018-09-12得票数 13
回答已采纳
你好，我在我的Angular项目中使用了PrimeNg组件。根据PrimeNg文档和Angular文档，我尝试了':host ::ng-deep'，':host-context()。但是什么都不起作用。
自定义css的PrimeNg文档：
Angular文档：
请建议我为PrimeNg组件添加自定义样式的最好方法。
浏览 0提问于2021-03-25得票数 0
我是角2的新手，我也在使用PrimeNG。
为了了解正在发生的事情，我复制了标签“Configura es”，你可以在图片上看到。
这两个选项卡有完全相同的代码，但行为不同。第一个没有正确加载切换开关。第二个很好用。
我的HTML：
<p-tabView orientation="left">
<p-tabPanel header="Administrador">
<p-growl [value]="msgs"></p-growl>
<
浏览 12提问于2016-11-25得票数 0
回答已采纳
PrimeNG工具提示会冻结，并且在从PrimeNG下拉列表中选择选项时不会自动隐藏。在悬停和单击时，工具提示正常工作，除非选择了一个选项。
模板代码如下：
<div class="col-lg-3 col-md-6 col-sm-5 col-xs-12"> <div class="form-group"> <label for="equipmentFeature" class="col-lg-4 col-md-3 col-sm-3 col-xs-12
浏览 0提问于2017-06-21得票数 0
回答已采纳
我使用的是PrimeNG，我希望像在演示中那样，以角度将可拖动的事件完成到日历中。这是。问题是，这个例子是在Vanilla JS和角形需要它的打字稿。
我创建了一个，尝试这样做，但由于类型记录代码，日历根本没有显示。
浏览 2提问于2021-07-05得票数 0
回答已采纳
3回答
我已经在我们的angular项目中使用了primeng多选下拉菜单。但是我们需要加载的数据量非常大，比如4-5K的元素。因此，我的dropdown在加载过程中需要10秒。
请建议我如何提高创建多选下拉菜单的性能。
浏览 10提问于2017-12-25得票数 7
回答已采纳
4回答
我正在使用一个角9项目内的primeng分页器组件来页面一个巨大的配置文件列表。如果用户在第3页上，打开配置文件并返回搜索，则当前页为1，但应该为3。我已将页面保存在服务中，因此显示了正确的数据，但分页器显示错误的页面。无法找到设置分页器当前页的方法。使用第一个属性不起作用。
浏览 8提问于2020-05-31得票数 8
回答已采纳
我的app.module.ts和app.迎宾面板-菜单-列表. this之间有这个错误。有人能告诉我问题出在哪里吗？
app.module.ts：
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { AppComponent } from './app.co
浏览 5提问于2017-09-27得票数 0
回答已采纳
我是从PrimeNG开始的，但我没有得到很酷的风格。但是，我没有看到ng服务或浏览器日志中的错误。
组件(我有一个日历和3个按钮)会出现，但是看起来很枯燥。
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
im
浏览 3提问于2019-12-13得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
