在單擊上一個和下一個按鈕組件視圖時，標題ID應該更改

Question

我在Angular中制作產品詳細信息頁面，我在單擊標題的下一個或上一個按鈕時在標題標題上得到錯誤的結果，它的工作是：

Product-details.component.ts從'@ angular / core'導入{Component，OnInit}; 從“ ./products”導入{IProduct}； 從'@ angular / router'導入{ActivatedRoute，Router，Params};

 @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> 

請告訴我我在哪里做錯了..

Answer 1

從我的理解中，我希望這是您期望的結果，並且這個答案會有所幫助。

//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"
    }
  })  
}

希望對您有所幫助！ 如果您需要進一步的澄清，請告訴我！