primeng 相关问题

使用此标记可以获得有关PrimeNG的问题，PrimeNG是Angular的UI组件集合。标记为[primeng]的问题也应标记为[angular]，但不是[primefaces]。

我试图通过设置以下内容从 p-tabView 元素中删除边框，但没有成功：当我在开发者工具中删除边框时...

html css primeng

回答 3 投票 0

我在一个延迟加载的项目中使用primeNG的p表。但我在加载表格时遇到了一个问题，没有额外的“点击”。在我的模板中，我有：我在一个延迟加载的项目中使用 primeNG 的 p-table。但我在加载表格时遇到了问题，没有额外的“点击”。在我的模板中，我有： <p-table [value]="products" [totalRecords]="totalRecords" [tableStyle]="{ 'min-width': '50rem' }" [paginator]="true" [rows]="10" [showCurrentPageReport]="true" [rowsPerPageOptions]="[5,10,20]" [lazy]="true" (onLazyLoad)="loadProducts($event)" > 在我的组件中我有： products: ProductDTO[] = []; totalRecords : number = 5 ... loadProducts(event : TableLazyLoadEvent){ console.log(event); this.projectsOverviewService.getProducts() .subscribe((response:PagedListDtoOfProductDTO)=> { this.products = response.items; this.totalRecords = response.totalRecords; console.log("loaded products"); }); } 我已验证正在设置产品和总记录。但我的表没有更新。仅当我单击分页器的下拉菜单时，才会呈现产品。我也尝试将它与 OnInit 结合起来，但这也不会加载它。仅当我仅使用 OnInit 方法并删除lazy="true" 和 onLazyLoad 时，我的表才能正确呈现。我还尝试在其周围的额外容器中使用 observable 并将 *ngIf 与异步管道一起使用，但不起作用，因为 OnInit 方法（填充初始产品 observable 所必需的）不能与 OnLazyLoad 一起使用方法（它不断触发 TableLazyLoadEvents）我已经找到问题了，根据给定的信息你是不可能知道的。在我的 component.ts 中我已经配置了 @Component({ ... changeDetection: ChangeDetectionStrategy.OnPush }) 将其更改为 @Component({ ... changeDetection: ChangeDetectionStrategy.Default }) 解决了我的问题

angular lazy-loading primeng primeng-table

回答 1 投票 0

Angular 创建动态组件断言错误

我遇到一种情况，我需要动态创建要在 Angular/PrimeNG 选项卡中显示的组件。应用程序启动时未定义选项卡。选项卡的内容取决于...

angular typescript primeng

回答 1 投票 0

如何使用自定义输入事件primeng angular

我有一个 Angular 16 项目我有一个数字输入，使用 formControls 进行验证因为我们经常使用此输入，所以我将其放入自定义组件中以使我的工作更轻松。我用primeng

javascript angular typescript primeng

回答 1 投票 0

与 p-carousel PrimeNG 对齐错误

我正在使用 Angular PrimeNG 编写一些代码，但在使用 p-carousel 时遇到了问题。问题是，正如你所看到的，标题没有很好地居中对齐，比它需要的位置稍微高了一点。

html angular carousel primeng

回答 1 投票 0

如何在 ng-template 中获取 primeng 下拉列表的索引值

我正在尝试在 ng-template 中获取 primeng 下拉列表的索引值，但它给了我空值。这是示例代码我正在尝试在 ng-template 中获取 primeng 下拉列表的索引值，但它给了我空值。这是示例代码 <p-dropdown [options]="cards" [(ngModel)]="selectedCard"> <ng-template let-card let-i="index" pTemplate="item"> <span>{{i}}</span> </ng-template> </p-dropdown> 如果您检查 primeng source 代码，您会发现传递了传递选项的项目，因此没有有关索引的信息 <ng-container *ngTemplateOutlet="template; context: {$implicit: option}"></ng-container> 一种方法是创建一个管道来查找传递选项的索引基 @Pipe({ name: 'indexOf' }) export class IndexOfPipe implements PipeTransform { transform(items:any[] , item:any): any { return items.indexOf(item); } } 示例 <p-dropdown [options]="cities" [(ngModel)]="selectedCountry" optionLabel="name" [filter]="true" [showClear]="true" placeholder="Select a Country"> <ng-template let-item pTemplate="item"> <div>🔹{{item.value.name}} {{cities | indexOf:item.value}} </div> </ng-template> </p-dropdown> 演示🚀🚀 你可以尝试<span>{{cards.indexOf(card)}}</span>。我认为 ng-template 中的 let-i="index" 在 primeng 9.x 文档中没有提及。启动索引为rowIndex let-index="rowIndex" 然后使用插值法 {{ index + 1 }} let-idx="index"：https://angular.io/api/common/NgForOf 使用示例： <div class="container"> <ng-template ngFor let-item [ngForOf]="items" let-idx="index"> {{idx}} </ng-template> </div>

html angular primeng

回答 4 投票 0

Angular 动态组件访问属性

我希望得到一些帮助。我需要在 PrimeNG 的 TabView 中动态创建一些新选项卡，其中充满了组件。它可以很好地显示所有组件，但是我如何访问

javascript angular typescript primeng

回答 1 投票 0

在动态对话框priemng中使用steps组件实现路由

任何人都可以帮助我在 primeng 的动态对话框中实现步骤组件吗？我正在开发一个示例项目，我需要在包含多个的对话框中实现登录屏幕

angular typescript angular-ui-router primeng angular-routing

回答 1 投票 0

PrimeNg 菜单栏在更改模型后不会重新渲染

我按照 https://www.primefaces.org/primeng/menubar 中提供的示例创建了一个带有一些菜单项的简单菜单栏。现在我想更改菜单后一项的可见性...

angular primeng

回答 2 投票 0

如何在ngAfterViewInit之后更改PrimeNG的p-card组件的背景？

我想在初始化视图后更新 p 卡（PrimeNG 组件）的背景。我的真实需求：我的 p 卡中有一张图像，我想检索图像的主色...

angular typescript primeng background-color styling

回答 1 投票 0

如何使用 Angular 4 Reactive Form 在 PrimeNg MultiSelect 中设置默认选定值？

我正在使用 PrimeNg (PrimeNg Multiselect) 和 Angular4 的 MultiSelect 控件与反应式表单，并且我想在表单加载期间保留一些默认选择的项目。超文本标记语言我正在将 PrimeNg (PrimeNg Multiselect) 和 Angular4 的 MultiSelect 控件与反应式表单一起使用，并且我想在表单加载期间保留一些默认选择的项目。 HTML <div class="col-md-4"> <span translate>settings.account.webhook.label.additional.variables</span> <p-multiSelect [options]="sensorsList" (onChange)="changeSensorsList($event)" formControlName="selectedSensorsList" name="selectedSensorsList" [panelStyle]="{minWidth:'20em'}"></p-multiSelect> </div> 这是我的 TypeScript 代码 sensorsList = [ { label: 'lat', value: {'id': 0, 'itemName': 'lat', 'selected': false }}, { label: 'lng', value: {'id': 1, 'itemName': 'lng' , 'selected': false}}, { label: 'address', value: {'id': 2, 'itemName': 'address' , 'selected': false}}, { label: 'origin', value: {'id': 3, 'itemName': 'origin' , 'selected': false}} ]; this.addEditWebhookForm = this._formBuilder.group({ name: [(_webhookToEdit) ? _webhookToEdit['name'] : '', [Validators.required]], selectedSensorsList: [] }); 当您创建selectedSensorsList时，您需要为您的formGroup提供价值： this.addEditWebhookForm = this._formBuilder.group({ ..., selectedSensorsList: [ defaulSensorsList ] }); 或稍后设置该值： this._formBuilder.get('selectedSensorsList').setValue(defaultSenorsList); HTML 您需要在 primeng 组件中设置一个 ngModel <div class="col-md-4"> <span translate>settings.account.webhook.label.additional.variables</span> <p-multiSelect [options]="sensorsList" (onChange)="changeSensorsList($event)" formControlName="selectedSensorsList" name="selectedSensorsList" [panelStyle]="{minWidth:'20em'}" [(ngModel)]="selectedDefault"></p-multiSelect> </div> TS selectedDefault= []; sensorsList.map((item) => selectedDefault.push(item.value)); 在这里我选择了所有这些。您还必须更新传感器列表对象以将所选值更改为 true 你必须在 ngOnInit 中设置默认选项 selectedSensorsList: [{'id': 0, 'itemName': 'lat'}]

angular primeng angular-reactive-forms primeng-dropdowns

回答 3 投票 0

在卡片内使用CSS定位元素

我对卡片中元素的定位有疑问。我希望“右上角元素”类中的元素放置在右上角，而按钮带有...

html css angular primeng

回答 1 投票 0

prime-ng DynamicDialog 页脚中的自定义按钮

PrimeNG，Angular 17。我在 DynamicDialog 页脚模板上有一个自定义按钮“更改状态”。对话框运行良好，按钮事件正在页脚模板上运行。不过，我想转发...

angular primeng

回答 1 投票 0

如何从角度调整元素的宽度：“p-multiselect”，使其始终与最宽的“li”元素一样宽？

我需要以下角度元素的帮助。我无法使用以下 p-multiSelect 设置自动宽度。我还上传了图片，你可以看到，一些“li”元素比 p-multi 更宽......