primeng 相关问题

Angular 搜索和添加功能

我目前有： ngOnInit() { this.getUsers(); } 获取用户（）{ this.http.get(“https://graph.microsoft.com/v1.0/users”) .订阅（用户=> {

当新数据从父组件到达时如何重新渲染子组件

我有以下代码。父组件使用 @Input 指令向子组件发送一些数据： 父 HTML 我有以下代码。父组件使用 @Input 指令向子组件发送一些数据： 父 HTML <div> <my-timeline [data]="data"> </my-timeline> </div> 在Parent TS中有一个服务向data提供数据 家长TS data=[]; ... this.service.getData().subscribe(res => { res.map(item=>{ this.data.push({ ... }); }) }) 孩子收到的信息是 儿童TS @Input data; eventArray=[]; ngOnInit() { console.log("called"); // called only for the first time createTimeline(data[0].id); // called only for the first time } createTimeline(id) { // called only for the first time this.eventArray.push(.....) } 子 HTML <p-timeline [value]="eventArray"> ... </p-timeline> 问题是p-timeline继续显示旧事件，即第一次加载的事件。因为父级的后续数据更改不会导致子级中的 ngOnIt 运行。这就是为什么 createTimeline 再也没有被调用过。请参与。 为了检测 @Input 属性的更改，您可以实现以下操作之一： Setter - 将 @Input() 属性实现为 getter 和 setter，如下所示： private _data: any; @Input() set data(value: any) { this._data= value; if(this._data) this.createTimeline(this._data[0].id) } get data(): any{ return this._data; } OnChanges 生命周期挂钩 - 首先解释一下什么是OnChanges钩子？ 来自 Angular.io： OnChanges 是一个生命周期钩子，当任何数据绑定属性 指令更改。定义一个 ngOnChanges() 方法来处理 变化。 让我们实现 OnChanges 生命周期挂钩，如下所示： @Component({...}) export class SelectedPlayerComponent implements OnChanges { @Input() data; ngOnChanges(changes: SimpleChanges) { if(changes.data) { this.createTimeline(changes.data.currentValue[0].id);//the new value that's changed } } } 感谢 Todd Motto 关于 检测角度输入变化 的好文章 在所有组件上使用 ChangeDetectionStrategy.Default 或使用不可变数据方法，例如 this.data = [...this.data, {//item}]; 可以在 docs 中阅读它，以及 Angular ngOnInit 的工作原理

Primeng MenuItem 的命令不起作用

我创建了一个表格组件，并为每行添加一个拆分按钮并尝试调用该函数但不起作用 这是我用来创建菜单项的函数 获取项目（行数据...

更改Primeng中的进度条颜色

我们如何更改Primeng中的进度条颜色。在进度条文档中，它列出了 ui 进度条值 作为宽度根据值变化的元素。 但是当在...

无法绑定到“appendTo”，因为它不是 p-confirmPopup 的已知属性

我有一个 PrimeNG 组件，我想附加到父 div，但它似乎总是附加到正文。 从 '@angular/core' 导入 { Component } ； 导入 { 确认服务，

如何在 Angular 中动态渲染 Primeng 组件？

我的要求是动态渲染 Primeng 组件以及普通的 html 元素，要渲染的模板是如下字符串形式 常量动态模板 = ` 我的要求是动态渲染 Primeng 组件以及普通的 html 元素，要渲染的模板是如下字符串形式 const dynamicTemplate = `<div class="card flex flex-row gap-3 justify-content-center"> <button type="button" class="btn btn-primary">Normal Button</button> <p-button label="Primary"></p-button> <p-button label="Secondary" styleClass="p-button-secondary"></p-button> <p-button label="Success" styleClass="p-button-success"></p-button> <p-button label="Info" styleClass="p-button-info"></p-button> <p-button label="Warning" styleClass="p-button-warning"></p-button> <p-button label="Help" styleClass="p-button-help"></p-button> <p-button label="Danger" styleClass="p-button-danger"></p-button> </div>` 现在我想在满足某些条件时动态渲染此模板。 这个问题很明显，primeng 组件需要在应用程序中注册才能让 Angular 识别它们。 我使用了ComponentFactoryResolver来动态创建组件并向其中注入模板，但它只渲染普通的html，而不渲染primeng组件。我也用过[innerHtml]，但也不起作用。 有没有可以动态渲染primeng组件的方法？ 你不能直接从字符串渲染这个模板，你需要先解析它，然后分别渲染每个组件。我建议使用其他格式来存储此信息，而不是简单的字符串（例如描述每个组件的 JSON，但它在很大程度上取决于您的用例），因为它可能更容易使用。 从 Angualar v13 开始，您可以使用 ViewContainerRef.createComponent 并直接传递 PrimeNG 组件引用。 每个 PrimeNG 可视化组件都会导出其模块和组件。例如，here您可以看到导出的模块中只有 ToolbarComponent 和 CommonModule），因此您不需要导入整个模块（如果您以编程方式渲染它，如下例所示），只需导入组件（这可能会有所不同）组件及其要求）。 这是创建 PrimeNG 工具栏 的简短示例，其中包含适合我的按钮（Angular 17.1.3、PrimeNG 17.6）： import { Toolbar } from 'primeng/toolbar'; import { Button } from 'primeng/button'; ... private viewRef = inject(ViewContainerRef); private renderer = inject(Renderer2); ... private renderToolbar() { const parentElement = this.renderer.createElement('div'); const toolbar = this.viewRef.createComponent(Toolbar); const toolbarGroupStart = this.renderer.createElement('div'); toolbarGroupStart.setAttribute('class', 'p-toolbar-group-start'); const toolbarMenuBtn = this.viewRef.createComponent(Button); toolbarMenuBtn.instance.styleClass = 'p-button-info'; toolbarMenuBtn.instance.label = 'Menu'; toolbarGroupStart.appendChild(toolbarMenuBtn.instance.el.nativeElement); toolbar.instance.getBlockableElement().appendChild(toolbarGroupStart); parentElement.appendChild(toolbar.instance.getBlockableElement()); this.renderer.appendChild(document.body, parentElement); }

检查 windows beforeunload 事件是如何触发的 - 按下按键或关闭浏览器时

我正在监听窗口的 beforeunload 事件。 然后我想确定 beforeunload 事件是由按下的按键（Ctrl+r/F5）还是由用户关闭浏览器窗口触发。 在这两种情况下我...

Fileupload - 服务的端点和 OpenAI 生成

我的端点是一个 RestConroller，其 Post-Method 如下所示： @PostMapping(路径 = "/xetra", 消耗 = { MediaType.APPLICATION_JSON_VALUE， 媒体类型。

Primeng v11 进度微调器不改变颜色

我正在使用 primeng 版本 11，并且我正在尝试更改微调栏的颜色，我尝试复制 primeng 形式的代码，但它对我不起作用。 html: 我正在使用 primeng 版本 11，并且我正在尝试更改微调栏的颜色，我尝试复制 primeng 形式的代码，但它对我不起作用。 html： <p-progressSpinner [style]="{width: '50px', height: '50px'}" styleClass="custom-spinner"></p-progressSpinner> CSS： @keyframes custom-progress-spinner-color { 100%, 0% { stroke: #16697A; } 40% { stroke: #489FB5; } 66% { stroke: #82C0CC; } 80%, 90% { stroke: #FFA62B; } } 模块已导入并检查了所有内容。 我遇到了同样的问题，我唯一能做的就是用 important 覆盖描边颜色的 CSS 规则。那么你只有一种颜色，没有渐变，但至少有效： .p-progress-spinner-circle { stroke: #yourColor !important; } 您可以使用相同的类名，无需新的： @Component({ selector: 'app-cart', templateUrl: './cart.component.html', styles: [` @keyframes p-progress-spinner-color { from { stroke: #yourColor; } to { stroke: #yourColor; } } `] }） 甚至你可以使用“from”和“to”，它们相当于百分比......干杯！！！ 请参阅文档以供参考 您应该在“@keyframes”代码块之前放置以下 CSS（在我的示例中为 SASS）： .ui-progress-spinner { &.custom-spinner { .ui-progress-spinner-circle { animation: ui-progress-spinner-dash 1.5s ease-in-out infinite, custom-progress-spinner-color 6s ease-in-out infinite; } } } 您需要重写动画本身，primeNg issues中有一个工作示例https://github.com/primefaces/primeng/issues/9232 您可以按如下方式更改微调器的颜色。 <p-progressSpinner class="spinner"></p-progressSpinner> .spinner ::ng-deep .p-progress-spinner-circle { stroke: white !important; }

Primeng 自动完成组件覆盖面板元素在自动完成栏上方展开：我如何才能仅在下方展开建议面板覆盖层

我一直在尝试设计 PrimeNg 自动完成组件的样式，以便当用户与其交互并且建议开始填充时，建议覆盖面板将仅显示在下面...

PrimeNg p-inputnumber 无法设置样式

我在尝试实现 PrimeNg Inputnumber 元素时陷入困境：https://www.primefaces.org/primeng/showcase/#/inputnumber 根据其文档，有几个属性可以...

窗口重新加载无法解决对话框承诺问题

在重新加载之前，我希望用户在对话框中确认重新加载。 根据结果，应用程序应该重新加载。 不幸的是，重新加载不起作用。有人有想法吗？ fromEvent(window, '卸载前').subscribe(e =&g...

Angular：装饰器在这里无效。ts(1206)

我目前正在使用 PrimeNg 17 在 Angular 17 项目中执行切换主题功能。我按照 Primeng 文档中的教程进行操作：https://www.youtube.com/watch?v=5VOuUdDXRsE&

PrimeNG Accordion 无法正常工作和显示

我尝试根据官方文档使用 primeNG Accordion 这是我的代码： 故事

Angular 15 p-dialog 不使用组件选择器渲染 HTML

我在模块（nursing-audit.module）中有一个Angular组件（audit2.component），我正在尝试打开一个p对话并渲染存在于不同模块中的组件（urc.component）（

PrimeNG 树组件禁用元素计数

无法禁用 p-tree 组件中的树元素计数，默认情况下处于打开状态。还没有在文档中找到任何可以切换它的暗示性属性，也许我遗漏了一些东西......

PrimeNG 日历问题

我在PrimenNG上遇到问题，请看一下这个并尝试给我一些建议，谢谢！ 我的 ts 文件： 从 '@angular/core' 导入 { Component } ； 从 '@angular/

Primeng Angular 改变p-对话框背景颜色

我一直在努力根据条件更改对话框的背景颜色。 斯塔克闪电战 changeColor 是我正在检查是否为真的变量。适用于更改其他内容的背景颜色...

Primeng Table 响应式布局堆栈/滚动不起作用

我在我的 Angular 项目中使用 PrimeNG。我试图使表格元素在响应时以“堆栈”模式显示，根据文档，这应该是一件简单的事情。 然而我...

使选项卡在父组件的角度中处于活动状态

这是我的产品仪表板.html 这是我的产品仪表板.html <nav #nav> <div class="nav nav-tabs" id="nav-tab" role="tablist"> <button class="nav-link active" id="nav-categories-tab" data-bs-toggle="tab" data-bs-target="#nav-categories" type="button" role="tab" aria-controls="nav-categories" aria-selected="true" (click)="showCategories()" [ngClass]="{ 'active':activeTab==='categories'}">Categories</button> <button class="nav-link" id="nav-product-lists-tab" data-bs-toggle="tab" data-bs-target="#nav-product-lists" type="button" role="tab" aria-controls="nav-product-lists" aria-selected="false"(click)="showProducts()" [ngClass]="{ 'active':activeTab==='products'}">Products</button> <button class="nav-link" id="nav-product-details-tab" data-bs-toggle="tab" data-bs-target="#nav-product-details" type="button" role="tab" aria-controls="nav-product-details" aria-selected="false" (click)="showProductDetails()" [ngClass]="{ 'active':activeTab==='product-details'}">Product Details</button> </div> </nav> 这是我的产品仪表板组件 export class ProductsDashboardComponent { activeTab = 'categories'; constructor(private router:Router, private route: ActivatedRoute){} showCategories(){ this.router.navigate(['categories'],{relativeTo: this.route}) } showProducts(){ this.router.navigate(['products'],{relativeTo: this.route}) } showProductDetails(){ this.activeTab = 'product-details'; this.router.navigate(['product-details'],{relativeTo: this.route}) } } 现在，当我单击“产品详细信息”选项卡时，前一个选项卡（“产品”选项卡）也显示为活动状态，如下所示。那么，如何使其他选项卡类处于非活动状态。 产品.html <div class="container"> <div class="list row ms-3"> <div class="col-md-12"> @if(hidden){ <p-table [value]="products" styleClass="p-datatable-striped"> <ng-template pTemplate="header"> <tr> <th>Name</th> <th>Image</th> <th>Category</th> <th>Price</th> <th>Actions</th> </tr> </ng-template> <ng-template pTemplate="body" let-product> <tr> <td>{{product.title}}</td> <td><img [src]="product.image" [alt]="product.title" width="100" class="shadow-4" /></td> <td>{{product.category}}</td> <td>{{product.price | currency:'USD'}}</td> <td><a class="btn btn-outline-primary" (click)="getProductDetailsById(product,'product-details')">View</a></td> <td><a class="btn btn-info" (click)="getProductById(product)">Edit</a></td> <td><button class="btn btn-danger" (click)="deleteProduct(product)"> Delete</button></td> </tr> </ng-template> <ng-template pTemplate="summary"> <div class="flex align-items-center justify-content-between"> In total there are {{products ? products.length : 0 }} products. </div> </ng-template> </p-table> </div> </div> </div> 产品组成 getProductDetailsById(product: Products,name:string){ this.productService.get(product.id) .subscribe( data => { this.currentProduct=data; this.currentIndex = data["id"], this.parent.activeTab = name; this.router.navigate(['products-dashboard/product-details/',this.currentIndex]) }) } 现在，如果我单击查看按钮，那么它应该导航到产品详细信息选项卡 产品详情.html <div class="container"> <div class="row ms-3"> <div class="card" style="width: 18rem;"> <img src={{currentProduct.image}} class="card-img-top" alt={{currentProduct.title}}> <div class="card-body"> <h5 class="card-title">{{currentProduct.title}}</h5> <h3 class="card-title">{{currentProduct.price | currency:'USD'}}</h3> <p class="card-text">{{currentProduct.description}}</p> </div> </div> </div> </div> 产品详细信息组件 import { Component, Inject, Input, OnInit, ViewChild } from '@angular/core'; import {ActivatedRoute, NavigationEnd, Router, RouterLink } from '@angular/router'; import { FormsModule } from '@angular/forms'; import { ReactiveFormsModule } from '@angular/forms'; import { CommonModule } from '@angular/common'; import { Products } from '../models/products.model'; import {ProductService } from '../services/products.service'; import { ProductsDashboardComponent } from '../products-dashboard/products-dashboard.component'; import { filter } from 'rxjs'; @Component({ selector: 'app-product-details', standalone: true, imports: [FormsModule, CommonModule,ReactiveFormsModule, RouterLink], providers:[ProductService], templateUrl: './product-details.component.html', styleUrl: './product-details.component.css' }) export class ProductDetailsComponent implements OnInit{ @Input() currentProduct: Products = { title: '', image: '', category:'', price: '' }; nav:any; message = ''; activeTab = 'categories'; constructor( private router:Router, private route: ActivatedRoute, private productService: ProductService, @Inject(ProductsDashboardComponent) private parent: ProductsDashboardComponent) {} ngOnInit(): void { this.message = ''; this.router.events.pipe( filter(event => event instanceof NavigationEnd) ).subscribe(() => { this.parent.activeTab = this.route?.snapshot?.firstChild?.routeConfig?.path || ''; }) this.getProduct(this.route.snapshot.params["id"]); } getProduct(id: string): void { this.productService.get(id) .subscribe({ next: (data) => { this.currentProduct = data; console.log(data); this.currentProduct.id = data["id"] this.currentProduct.title = data["title"] this.currentProduct.category = data["category"] this.currentProduct.image = data["image"] this.currentProduct.price = data["price"] this.currentProduct.description = data["description"] }, error: (e) => console.error(e) }); } } 现在产品显示在同一个选项卡中 app.routes.ts export const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full' }, // redirect to `first-component` { path: 'home', component: HomeComponent}, { path: 'hooks', component: HooksComponent}, { path: 'dashboard', component: DashboardComponent}, { path: 'products-dashboard', component: ProductsDashboardComponent, children:[ {path: 'categories', component: CategoriesComponent}, {path: 'products', component: ProductsComponent}, {path: 'product-details', component: ProductDetailsComponent}, {path: "product-details/:id", component: ProductDetailsComponent }, ] }, { path: '**', component: PagenotfoundComponent }, // Wildcard route for a 404 page ]; 以下是我所做的更改。 首先进行导航，我们位于products，需要前往product-details，因此我们后退一步../到达product-dashboard，然后导航至product-details 代码 getProductDetailsById(product: any, name: string) { this.productService.get(product.id).subscribe((data: any) => { this.router.navigate( [ '../product-details', // we need to navigate one step back and then inside product details! data['id'], ], { relativeTo: this.activateRoute, } ); }); } 其次，我们只需要在父级上监听选项卡选择product-dashboard我们可以从product-details中删除代码 我添加了路由器参数订阅，因为它是动态的，即使组件没有被破坏，它也会显示正确的值！ 代码 this.subscription.add( this.route.params.subscribe((params: Params) => { this.getProduct(+params['id']); // we get id as string, so we convert to number }) ); 无论我们在哪里进行订阅，我们都需要将其添加到订阅中并在 ngOnDestroy 上取消订阅，这将防止应用程序中出现内存泄漏！ 我希望这能解决您的问题！ 产品html <div class="container"> <div class="list row ms-3"> <div class="col-md-12"> @if(!hidden){ <p-table [value]="products" styleClass="p-datatable-striped"> <ng-template pTemplate="header"> <tr> <th>Name</th> <th>Image</th> <th>Category</th> <th>Price</th> <th>Actions</th> </tr> </ng-template> <ng-template pTemplate="body" let-product> <tr> <td>{{ product.title }}</td> <td> <img [src]="product.image" [alt]="product.title" width="100" class="shadow-4" /> </td> <td>{{ product.category }}</td> <td>{{ product.price | currency: 'USD' }}</td> <td> <a class="btn btn-outline-primary" (click)="getProductDetailsById(product, 'product-details')" >View</a > </td> <td> <a class="btn btn-info" (click)="getProductById(product)">Edit</a> </td> <td> <button class="btn btn-danger" (click)="deleteProduct(product)"> Delete </button> </td> </tr> </ng-template> <ng-template pTemplate="summary"> <div class="flex align-items-center justify-content-between"> In total there are {{ products ? products.length : 0 }} products. </div> </ng-template> </p-table> } </div> </div> </div> 产品TS import { CommonModule } from '@angular/common'; import { Component, OnInit } from '@angular/core'; import { RouterModule, Router, ActivatedRoute } from '@angular/router'; import { TableModule } from 'primeng/table'; import { of, Subscription } from 'rxjs'; import { ProductService } from '../product.service'; @Component({ selector: 'app-products', templateUrl: './products.component.html', styleUrls: ['./products.component.css'], imports: [RouterModule, TableModule, CommonModule], standalone: true, }) export class ProductsComponent implements OnInit { subscription: Subscription = new Subscription(); hidden = false; get products() { return this.productService.products; } constructor( private router: Router, private productService: ProductService, private activateRoute: ActivatedRoute ) {} ngOnInit() {} getProductDetailsById(product: any, name: string) { this.subscription.add( this.productService.get(product.id).subscribe((data: any) => { this.router.navigate( [ '../product-details', // we need to navigate one step back and then inside product details! data['id'], ], { relativeTo: this.activateRoute, } ); }) ); } getProductById(e: any) {} deleteProduct(e: any) {} ngOnDestroy() { this.subscription.unsubscribe(); } } 产品详情html <div class="container"> <div class="row ms-3"> <div class="card" style="width: 18rem;"> <img src="{{ currentProduct.image }}" class="card-img-top" alt="{{ currentProduct.title }}" /> <div class="card-body"> <h5 class="card-title">{{ currentProduct.title }}</h5> <h3 class="card-title">{{ currentProduct.price | currency: 'USD' }}</h3> <p class="card-text">{{ currentProduct.description }}</p> </div> </div> </div> </div> 产品详情 import { CommonModule } from '@angular/common'; import { Component, Inject, Input, OnInit } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { ActivatedRoute, RouterLink, NavigationEnd, Router, Params, } from '@angular/router'; import { filter, Subscription } from 'rxjs'; import { ProductService } from '../product.service'; @Component({ selector: 'app-product-details', templateUrl: './product-details.component.html', styleUrls: ['./product-details.component.css'], imports: [FormsModule, CommonModule, ReactiveFormsModule, RouterLink], standalone: true, }) export class ProductDetailsComponent { subscription: Subscription = new Subscription(); @Input() currentProduct: any = { title: '', image: '', category: '', price: '', }; nav: any; message = ''; constructor( private router: Router, private route: ActivatedRoute, private productService: ProductService ) {} ngOnInit(): void { this.message = ''; this.subscription.add( this.route.params.subscribe((params: Params) => { this.getProduct(+params['id']); // we get id as string, so we convert to number }) ); } getProduct(id: number): void { this.subscription.add( this.productService.get(id).subscribe({ next: (data: any) => { this.currentProduct = data; this.currentProduct.id = data['id']; this.currentProduct.title = data['title']; this.currentProduct.category = data['category']; this.currentProduct.image = data['image']; this.currentProduct.price = data['price']; this.currentProduct.description = data['description']; }, error: (e: any) => console.error(e), }) ); } ngOnDestroy() { this.subscription.unsubscribe(); } } 产品仪表板 html <nav #nav> <div class="nav nav-tabs" id="nav-tab" role="tablist"> <button class="nav-link" id="nav-categories-tab" data-bs-toggle="tab" data-bs-target="#nav-categories" type="button" role="tab" aria-controls="nav-categories" aria-selected="true" (click)="showCategories()" [ngClass]="{ 'active':activeTab==='categories'}">Categories</button> <button class="nav-link" id="nav-product-lists-tab" data-bs-toggle="tab" data-bs-target="#nav-product-lists" type="button" role="tab" aria-controls="nav-product-lists" aria-selected="false" (click)="showProducts()" [ngClass]="{ 'active':activeTab==='products'}">Products</button> <button class="nav-link" id="nav-product-details-tab" data-bs-toggle="tab" data-bs-target="#nav-product-details" type="button" role="tab" aria-controls="nav-product-details" aria-selected="false" (click)="showProductDetails()" [ngClass]="{ 'active':activeTab==='product-details'}">Product Details</button> </div> <router-outlet/> </nav> 产品仪表板 ts import { CommonModule } from '@angular/common'; import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, provideRouter, Router, RouterModule, NavigationEnd, Routes, } from '@angular/router'; import { filter } from 'rxjs/operators'; import { ProductService } from '../product.service'; @Component({ selector: 'app-products-dashboard', templateUrl: './products-dashboard.component.html', styleUrls: ['./products-dashboard.component.css'], imports: [CommonModule, RouterModule], providers: [ProductService], standalone: true, }) export class ProductsDashboardComponent { activeTab = 'categories'; constructor(private router: Router, private route: ActivatedRoute) { this.router.events .pipe(filter((event) => event instanceof NavigationEnd)) .subscribe(() => { this.activeTab = this.route?.snapshot?.firstChild?.routeConfig?.path?.split('/')[0] || ''; }); } showCategories() { this.router.navigate(['categories'], { relativeTo: this.route }); } showProducts() { this.router.navigate(['products'], { relativeTo: this.route }); } showProductDetails() { this.router.navigate(['product-details'], { relativeTo: this.route }); } } 堆栈闪电战