Issue

This Content is from Stack Overflow. Question asked by Frankenstar

I need your help. With the help of the API, I get the data and get 20 objects. I display these elements on the page and each element has a button. I need a certain object to be displayed when I click, but unfortunately I only get the first object and I also get an error that points to .find((element) => element.id === id) and says: TS2367: This condition will always return 'false' since the types 'number' and 'ProductModel' have no overlap. and second error: this.productDifferent: Type 'ProductModel | undefined' is not assignable to type 'ProductModel'.<br/>Type 'undefined' is not assignable to type 'ProductModel'. How to get clickable object on which I click? Thank you very much

Component.ts

import {Component, OnInit} from '@angular/core';
import {ApiService} from "../../services/api.service";
import {ProductModel} from "../../models/ProductModel";
import {CheckboxServiceService} from "../../services/checkbox-service.service";

@Component({
   selector: 'app-products-list-api',
   templateUrl: './products-list-api.component.html',
   styleUrls: ['./products-list-api.component.css']
})

export class ProductsListApiComponent implements OnInit {

   products: ProductModel[];
   productDifferent: ProductModel;

   constructor(private apiService: ApiService) {}

   ngOnInit(): void {
     this.apiService.getAllProducts().subscribe((value) => {
       this.products = value
     });
   }

   addProductToList(id: ProductModel) {
     this.productDifferent = this.products.find((element) => element.id === id);
   }

}

Component.html

<div>
   <div *ngFor="let product of products">
       <p> {{product.id}} {{product.title}} {{product.price}}
         <button (click)="addProductToList(product)"> Add to products list </button>
       <p>
   </div>
</div>

ProductModel.ts

export interface ProductModel {
   id: number;
   title: string;
   price: number;
}

Servie

import { Injectable } from '@angular/core';
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs";
import {ProductModel} from "../models/ProductModel";

@Injectable({
   providedIn: 'root'
})

export class ApiService {

   constructor(private httpClient: HttpClient) {}

   getAllProducts(): Observable<ProductModel[]> {
      return this.httpClient.get<ProductModel[]>('https://fakestoreapi.com/products');
   }

}

Solution

Here’s an explanation of the errors:

S2367: This condition will always return 'false' since the
types 'number' and 'ProductModel' have no overlap.

This occurs because you have the variable id which is type ProductModel, but you are comparing it to element.id which if of type number. The error tells you that your condition will never be true because a ProductModel can never be equal to a number.

Your mistake is here:

   addProductToList(id: ProductModel) {
     this.productDifferent = this.products.find((element) => element.id === id);
   }

The variable you call id is really a ProductModel, so in your .find(), you need to compare against the product.id, not the ProductModel. To fix, just rename your variable and compare against the id property:

   addProductToList(product: ProductModel) {
     this.productDifferent = this.products.find((element) => element.id === product.id);
   }

this.productDifferent`: `Type 'ProductModel | undefined' is not assignable to type 
'ProductModel'. Type 'undefined' is not assignable to type 'ProductModel'.

This occurs because you’ve defined productDifferent to be of type ProductModel, but the Array.prototype.find() method returns ProductModel|undefined. That’s exactly what the error is telling.

You actually don’t even need to use .find(), your function accepts the clicked ProductModel as a parameter, so just use it!

   addProductToList(product: ProductModel) {
     this.productDifferent = product;
   }

This Question was asked in StackOverflow by Dmitry Chernyak and Answered by BizzyBob It is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.