I am getting error as mentioned below-

Type '{ id: number; name: string; price: number; quantity: number; status: string; description: string; imgaddress: string; } | undefined' is not assignable to type 'ProductInterface[]'. Type 'undefined' is not assignable to type 'ProductInterface[]'.ts(2322)

while finding the product id from the main link (snapshot). Here is my ts file-

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { productsjson } from 'src/data/products';
import { ProductInterface } from 'src/product';
@Component({
  selector: 'app-product-shop',
  templateUrl: './product-shop.component.html',
  styleUrls: ['./product-shop.component.css']
})
export class ProductShopComponent implements OnInit {
  product!: ProductInterface;
  constructor(private route: ActivatedRoute) { }
  ngOnInit(): void {
    const routeParams = this.route.snapshot.paramMap;
    const id = Number(routeParams.get("productId"));**
    this.product = productsjson.find(product => product.id === id);//error here
  }
}

Here is my product.ts interface file-

export interface ProductInterface{
    id: number,
    name: string,
    price: number,
    quantity: number,
    status: string,
    description: string,
    imgaddress: string
}

Here is the productsjson.ts file-

export const productsjson=[
    {
        id: 1,
        name: 'Selenium',
        price: 799,
        quantity:2,
        status:'In Stock',
        description:'this course is for automation testing',
        imgaddress:'https://cdn.arstechnica.net/wp-content/uploads/2018/06/macOS-Mojave-Dynamic-Wallpaper-transition.jpg'
    },
    {
        id: 2,
        name: 'Java',
        price: 1299,
        quantity:5,
        status:'In Stock',
        description:'this course is for Java Programming Language',
        imgaddress:'https://cdn.arstechnica.net/wp-content/uploads/2018/06/macOS-Mojave-Dynamic-Wallpaper-transition.jpg'
    }];

CodePudding user response：

I think you need to add this in your ngOnInit method

ngOnInit(): void {
    const routeParams = this.route.snapshot.paramMap;
    const id = Number(routeParams.get("productId"));
    if (productsjson && productsjson.lenght > 0) {
       this.product = productsjson.find(product => product.id === id);
    }
  }

You need to check if productsjson is not undefined and has at least one element to use find method. Try this and let me know it works for you.

CodePudding user response：

In your ngOnInit you can easily check if the value exists with optional chiaing available from Typescript 3.7.

And your code looks like:

ngOnInit(): void {
    const routeParams = this.route.snapshot.paramMap;
    const id = Number(routeParams.get("productId"));**
    this.product = productsjson?.find(product => product.id === id);
}

Oterhwise, if you are with TS < 3.7 you have to add the standard check:

ngOnInit(): void {
  const routeParams = this.route.snapshot.paramMap;
  const id = Number(routeParams.get("productId"));
  if (productjson && productjson.lenght > 0) { 
    this.product = productsjson.find(product => product.id === id);
  }
}

But the real problem is that productjson.find is returning an object without an interface: export const productsjson is just a dictionary without any type. You have to add as on your find or declare the variable with a type