I am making product details page in Angular i am getting wrong result on header title its coming on array while clicked on next or previous button my working is:
Product-details.component.ts import { Component, OnInit } from '@angular/core'; import { IProduct } from './products'; import { ActivatedRoute, Router, Params } from '@angular/router';
@Component({ templateUrl: './product-detail.component.html', styleUrls: ['./product-detail.component.css'] }) export class ProductDetailComponent implements OnInit { pageTitle: string = 'Product Detail'; product: IProduct; constructor(private route: ActivatedRoute, private router: Router) { } ngOnInit() { // let id = +this.route.snapshot.paramMap.get('id'); this.route.params.subscribe((params : Params)=>{ let id = parseInt(params ['id']); this.pageTitle += `: ${id}`; this.product = { "productId": id, "productName": "Leaf Rake", "productCode": "GDN-0011", "releaseDate": "March 19, 2016", "description": "Leaf rake with 48-inch wooden handle.", "price": 19.95, "starRating": 3.2, "imageUrl": "assets/images/cutter.jpg" } }) } onBack(): void { this.router.navigate(['/products']); } goPrevious(){ let previousId = this.product.productId - 1; this.router.navigate(['/products', previousId]); } goNext(){ let nextId = this.product.productId + 1; this.router.navigate(['/products', nextId]); } } Product-details.component.html <div class="card" *ngIf='product'> <div class="card-header"> {{pageTitle + ': ' + product.productName}} </div> <div class='card-body'> <div class='row'> <div class='col-md-8'> <div class='row'> <div class='col-md-4'>Name:</div> <div class='col-md-8'>{{product.productName}}</div> </div> <div class='row'> <div class='col-md-4'>Code:</div> <div class='col-md-8'>{{product.productCode | lowercase | convertToSpaces: '-'}}</div> </div> <div class='row'> <div class='col-md-4'>Description:</div> <div class='col-md-8'>{{product.description}}</div> </div> <div class='row'> <div class='col-md-4'>Availability:</div> <div class='col-md-8'>{{product.releaseDate}}</div> </div> <div class='row'> <div class='col-md-4'>Price:</div> <div class='col-md-8'>{{product.price|currency:'USD':'symbol'}}</div> </div> <div class='row'> <div class='col-md-4'>5 Star Rating:</div> <div class='col-md-8'> <pm-star [rating]='product.starRating'> </pm-star> </div> </div> </div> <div class='col-md-4'> <img class='center-block img-responsive' [style.width.px]='200' [style.margin.px]='2' [src]='product.imageUrl' [title]='product.productName'> </div> </div> </div> <div class='card-footer'> <button class='btn btn-outline-secondary' (click)='onBack()' style='width:80px'> <i class='fa fa-chevron-left'></i> Back </button> <div class="pull-right"> <button class='btn btn-danger' (click)='goPrevious()' style='width:80px'> Previous </button> <button class='btn btn-primary' (click)='goNext()' style='width:80px'> Next </button> </div> </div> </div>
please tell me where i am doing wrong..
From what I have understood I hope this the result you are expecting and this answer helps.
//Remove the 'Product details here'
pageTitle: string = '';
ngOnInit() {
// let id = +this.route.snapshot.paramMap.get('id');
this.route.params.subscribe((params : Params)=>{
let id = parseInt(params ['id']);
//and change the page title like this
this.pageTitle = `Product details: ${id}`;
this.product = {
"productId": id,
"productName": "Leaf Rake",
"productCode": "GDN-0011",
"releaseDate": "March 19, 2016",
"description": "Leaf rake with 48-inch wooden handle.",
"price": 19.95,
"starRating": 3.2,
"imageUrl": "assets/images/cutter.jpg"
}
})
}
I hope this helps this is what you are expecting! If you need further clarifications let me know!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.