How to get different Object in click from request?

Dmitry Chernyak 0
Viewed 50

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'.
Type 'undefined' is not assignable to type 'ProductModel'.`

How to get clickable object on which I click?

Component.ts

@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;
}

Service

@Injectable({
   providedIn: 'root'
})

export class ApiService {

   constructor(private httpClient: HttpClient) {}

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

}
angular
1 Answers

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;
   }
BizzyBob0
Related