CODEWITHSUNDEEP
htmlangulartypescript
rupak
rupak

Reputation: 58

Property 'select' does not exist on type '{}'

I am new in Angular and trying to make an ecommerce project so I want to filter my products based on what is in queryParams of the URL.

So lets say I have URL as

http://localhost:4200/?category=Fruits

so it should filter all the products of category as Fruits

Here is the code for that

html File

<div class="row ">
  <div class="col-md-3">
    <ul class="list-group" <a *ngFor="let c of categories" class="list-group-item" routerLink="/" routerLinkActive="active" [queryParams]="{category:c.name}">
      {{c.name}}
      </a>
    </ul>
  </div>
  <div class="col">
    <div class="row">
      <ng-container *ngFor="let p of products;let i=index" class="row-eq-height">
        <div class="col">
          <mdb-card style="width:17rem;" class="c1">
            <div class="view rgba-white-slight waves-light" mdbWavesEffect>
              <mdb-card-img [src]="p?.imageurl" alt="Card image cap" class="cardimg"> </mdb-card-img>
              <a>
                <div class="mask"></div>
              </a>
            </div>
            <mdb-card-body>
              <mdb-card-title>
                <h4>{{p?.title}}</h4>
              </mdb-card-title>
              <mdb-card-text>$ {{p?.price}}
              </mdb-card-text>
              <button mdbBtn type="button" color="primary" size="sm" mdbWavesEffect>Add to Cart</button>
            </mdb-card-body>
          </mdb-card>
        </div>

      </ng-container>
    </div>
  </div>


</div>

.component.ts

import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ProductsService } from '../services/products.service';
import { ItemsService } from '../services/items.service';
import { filter } from 'rxjs/operators';
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})

export class HomeComponent implements OnInit {
  products;
  categories;
  query;
  filteredproducts;
  subscription: Subscription;

  constructor(private prservice: ProductsService, private iservice: ItemsService, private activatedrouter: ActivatedRoute) { }


  ngOnInit() {
    this.subscription = this.iservice.getdata().subscribe(data => {
      this.products = data;
      console.log(this.products)
    });

    this.subscription = this.iservice.getitems().subscribe(categ => {
      this.categories = categ;
    });

    this.activatedrouter.queryParams.subscribe(p => {
      this.query = p['category'];
      console.log(this.query)

      this.filteredproducts = this.products.pipe(filter(p => p.select === this.query));
      console.log(this.filteredproducts)

    });
  }

  OnDestroy() {
    this.subscription.unsubscribe();
  }
}

So here is the screenshot of my products that I get in my console https://ibb.co/FnKDvsk

And now I have applied filter function to the "select" to filter the products

The errors I am facing are

  1. Cannot read property 'pipe' of undefined
  2. Property 'select' does not exist on type '{}'.

Upvotes: 0

Views: 2133

Answers (2)

Maihan Nijat
Maihan Nijat

Reputation: 9355

Why it's happening? Because this.products is undefined and you are applying pipe on undefined.

Solutions: Initialized products in the beggning : products = []

Or 

ngOnInit() {
  this.subscription = this.iservice.getdata().subscribe(data => {
    this.products = data;
    console.log(this.products)

    this.activatedrouter.queryParams.subscribe(p => {
      this.query = p['category'];
      console.log(this.query)
      this.filteredproducts = Object.create(this.products);
      this.filteredproducts = this.filteredproducts.filter(p => p.select === this.query);
      console.log(this.filteredproducts)

    });
  });

  this.subscription = this.iservice.getitems().subscribe(categ => {
    this.categories = categ;
  });
}

Upvotes: 1

Igor
Igor

Reputation: 62258

Error 1: just as the error states this.products is undefined so calling any member on it will yield that error. One way to fix this is to move the call to inside the callback for when this.products will be assigned a value. Example:

The other error is you are trying to apply pipe/filter to a returned array. This can only be applied to an observable, it is a part of the rxjs library. Just use Array.prototype.filter directly on the returned array.

ngOnInit() {
  this.subscription = this.iservice.getdata().subscribe(data => {
    this.products = data;
    console.log(this.products);
    this.activatedrouter.queryParams.subscribe(p => {
      this.query = p['category'];
      console.log(this.query)

      this.filteredproducts = this.products.filter(p => p.select === this.query);
      console.log(this.filteredproducts)
    });       
  });

  this.subscription = this.iservice.getitems().subscribe(categ => {
    this.categories = categ;
  });
}

Error 2: Property 'select' does not exist on type '{}'.

The returned product instances do not contain a select member. Or perhaps this is caused elsewhere in your code but this is the only place in the shared code where you included a call to a member select.

Upvotes: 1

Related Questions