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 }); } } 堆栈闪电战

angular twitter-bootstrap bootstrap-5 primeng bootstrap-tabs

回答 1 投票 0

即使我将 numVisible 设置为 1，Prime NG 轮播也会在设置 autoplayInterval 属性后显示两行

我在 Angular 17 项目上使用 PrimeNG v17。在使用轮播时，我遇到了一些问题。 numVisible 道具在非自动播放模式下效果很好。但是一旦我设置了 autoplayInterval 属性，它就会显示 2 ro...

angular angular-material tailwind-css server-side-rendering primeng

回答 1 投票 0

如何使用primeng将文本“ON”和“OFF”添加到角度切换按钮？

我在我的 angular14 项目中使用 primeng 。我想在开关切换按钮内显示 ON 和 OFF 标签。可能有人知道该怎么做吗？ https://pri...

angular primeng togglebutton

回答 1 投票 0

PrimeNG pInputTextarea - 当 [value] 属性未定义时，占位符不会出现

我有一个只读文本区域，应该显示某个对象的值。如果对象未定义，它也会在文本区域内显示“未定义”而不是占位符...

html angular textarea primeng

回答 1 投票 0

PrimeNG 10.0.3 - 错误 NG8001：“p-tabView”不是已知元素

我在 Angular 10 应用程序中使用 PrimeNG 10.0.3。在其中我导入了几个 PrimeNG 组件并毫无问题地使用它们。但是，当我尝试使用 TabView 模块时，出现错误

primeng

回答 2 投票 0

PrimeNG 中的自定义全局过滤器（FilterService）

我在 PrimeNG 中过滤 p 表时遇到了问题。设想：表包含：约翰·凯文·多伊搜索关键词：约翰·多伊预期：1 行，我使用内置过滤器得到 0 行；我试过了...

javascript angular typescript primeng

回答 2 投票 0

Angular 和 PrimeNg Datepicker（p-calendar）：禁用未来日期

我正在尝试使用 primeNG datepicker 来选择日期，我需要禁用所有未来日期（不包括今天），除了 [maxDate] 输入不起作用，实际上，如果我应用它，它会禁用...

angular datepicker primeng angular-date-format

回答 1 投票 0

Primeng FormData 文件上传到 Spring Boot 不起作用

我正在尝试将文件从 Angular 版本（13.3.8）、Primeng（13.2.1）上传到 Spring Boot 作为多部分文件，但我无法在 post 方法中获取该文件（状态：415，错误）：'不支持...

angular spring-boot multipartform-data primeng

回答 1 投票 0

如何在Angular中绑定p-autoComplete中的值

我有一个带有 p-自动完成功能的搜索框。当我搜索该值时，该值会显示在建议中。我正在尝试显示 p-

angular primeng

回答 2 投票 0

在 primeng p-calendar 中的自定义验证器中未获取 ngModel 的更新值

我正在尝试使用带有这样图标的p日历我正在尝试使用带有这样的图标的p-calendar <p-calendar [showOnFocus]="false" [locale]="sw" dateFormat="yy-mm-dd" [style]="{'width': '120px'}" [showIcon]="true" [(ngModel)]="abc.efg.fromDate" [check]="checkDate()" [keepMessage]="true" [keepInvalid]="true" (onSelect)="dateOnSelect($event)" alwaysShow></p-calendar> 应用程序组件中 checkDate() 的实现如下所示 checkDate(): ValidatorFn { return (control: AbstractControl): { [key: string]: any } => { console.log('date from : ', this.abc.efg.fromDate); // other implementation } } 我面临的问题是，每当我选择一个日期（通过单击图标）时，我都会在 checkDate() 中接到电话，并且 this.abc.efg.fromDate 的值始终为 null，但我得到的值函数中的 this.abc.efg.fromDate dateOnSelect($event) setDateOnSelect(event): void { console.log('new date from: ', this.abc.efg.fromDate); } 我该如何解决这个问题？编辑：除了直接将值传递给函数之外，我还能在验证器上做些什么吗？？ PS：this.abc.efg.fromDate是日期字段。要解决此问题，您可以使用“ngModelChange”。这直接捕获变化并返回值。 <p-calendar [showOnFocus]="false" [locale]="sw" dateFormat="yy-mm-dd" [style]="{'width': '120px'}" [showIcon]="true" [(ngModel)]="abc.efg.fromDate" [keepMessage]="true" [keepInvalid]="true" (onSelect)="dateOnSelect($event)" (ngModelChange)="checkDate($event)" alwaysShow> </p-calendar> 在 ts 文件中创建一个函数。 checkDate(newDate: any){ console.log(newDate); } 希望这有效并解决您的问题。

angular primeng primeng-calendar

回答 1 投票 0

覆盖默认的 primeNG 图标而不创建自定义组件

我下面有以下代码。我想要做的是更改出现的图标，同时保留相同的 API（图标：'pi pi-check-circle'，参数）。换句话说，我想要零编辑......

angular primeng primeflex primeicons

回答 1 投票 0

如何使用primeng根据角度中其他下拉菜单的选择来显示下拉项目？

我想显示距离该位置最近的商店。因此，我给出了 2 个下拉菜单，一个用于位置（州），另一个用于显示最近的商店（租户）。有6个地点...

angular typescript frontend primeng

回答 1 投票 0

primeng 相关问题

最新问题