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' }}

@HarunYilmaz products is an array that works fine and it shows all the products of the database — Houda Boukhobza, Mar 08 '22 at 16:42

Andres2142 · Answer 1 · 2022-03-07T22:31:31.553

0

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
  )

edited Mar 07 '22 at 22:31

answered Mar 07 '22 at 21:46

Andres2142

2,622
2
14
19

For The first one it didn't work and it still returns undefined and I can't set it to id=1 since I have other products with different Id and for the property product it's declared in another service called product.ts `export class Product { id:string; sku: string; name :string; description:string; unitPrice:number; imageUrl:string; active:boolean; unitsInStock:number; dateCreated:Date; lastUpdated:Date; } ` – Houda Boukhobza Mar 07 '22 at 22:10
and in the ts of the component shop-left-two I 've set it like this `products: Product[]=[];` – Houda Boukhobza Mar 07 '22 at 22:17
@HoudaBoukhobza Did you try console.log the response from this.productService.getProduct(theProductId) ? Can you post that data here? – Andres2142 Mar 07 '22 at 22:24
of course i got this in the console `ERROR HttpErrorResponse {headers: HttpHeaders, status: 500, statusText: 'OK', url: 'http://localhost:8080/api/products/NaN', ok: false, …}` – Houda Boukhobza Mar 07 '22 at 23:24
That's the issue then, you are getting 500 from the backend, not the actual data – Andres2142 Mar 08 '22 at 00:48
how to fix this Error please? – Houda Boukhobza Mar 08 '22 at 19:37

Dynamic routing with "routerLink" return undefined Angular 10

1 Answers1