Dynamic routing with "routerLink" return undefined Angular 10

Question

I used the following routing to return the detailPage of each product <a [routerLink]="['/shop-left-two/', tempProduct?.id]">

I got this error Failed to load resource: the server responded with a status of 500 ()

and my localhost@ http://localhost:4200/shop-left-two/undefined

ps : when I enter http://localhost:4200/shop-left-two/1 it works fine and returns the productDetails of the productid=1

shoplefttwo.component.html

<div class="col-lg-4 col-md-6" *ngFor="let tempProduct of products ">
  <div class="food-box shop-box style-2">
    <div class="thumb">
      <a [routerLink]="['/shop-left-two/', tempProduct?.id]">
        <img src="{{tempProduct.imageUrl}}" alt="images"> 
      </a>
    </div>
  </div>
</div>
                                    

shopdetail.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Product } from 'src/app/common/product';
import { ProductService } from 'src/app/services/product.service';
import { RouterModule } from '@angular/router';
@Component({
  selector: 'app-shopdetail',
  templateUrl: './shopdetail.component.html',
  styleUrls: ['./shopdetail.component.css']
})
export class ShopdetailComponent implements OnInit {
  
  product:Product= new Product();
  constructor(private productService: ProductService ,
              private route:ActivatedRoute      ) { }
ngOnInit(): void {
    this.route.paramMap.subscribe( () =>{
      this.handleProductDetails();
    })
  }
  handleProductDetails() {
  const theProductId:number = +this.route.snapshot.paramMap.get('id');
  this.productService.getProduct(theProductId).subscribe(
    data =>{
      this.product= data ;
    }
  )
  } 

app-routing.module.ts

  {path :'shop-left-two/:id' ,component:ShopdetailComponent ,data: { breadcrumb: 'Shop Detail' }}

Answer 1

The id for tempProduct is the issue, since you are using the save navigation operator (?), appends undefined

Now the question is, why id is undefined ? Even though sounds like is a temporary product based on the name tempProduct , it should have an id...

If you are getting that undefined value, then skip it

<div class="col-lg-4 col-md-6" *ngFor="let tempProduct of products ">
  <div 
    class="food-box shop-box style-2" 
    *ngIf="temProduct?.id"> // show only if tempProduct has ID in it
    <div class="thumb">
      <a [routerLink]="['/shop-left-two/', tempProduct.id]">
        <img src="{{tempProduct.imageUrl}}" alt="images"> 
      </a>
    </div>
  </div>
</div>

UPDATE:

I see you have a property called product , and in the template HTML you have products ... maybe that's the problem? Also, your product should be an array

export class ShopdetailComponent implements OnInit {
  products: Product[]= []//new Product();
  ...
  ...
  ...
  

  this.productService.getProduct(theProductId).subscribe(
    data => this.products = data
  )