CODEWITHSUNDEEP
angulartypescript
Melody
Melody

Reputation: 1

Angular Error-- Type 'undefined' is not assignable to type 'ProductInterface[]'.ts(2322)

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

Upvotes: 0

Views: 1021

Answers (2)

Shifenis
Shifenis

Reputation: 1125

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

Upvotes: 0

Jose Vicente
Jose Vicente

Reputation: 197

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.

Upvotes: 0

Related Questions