Dina93
Dina93

Reputation: 25

Not printing to browser scope element

I have this filtered collection:

this.myForm.get('filterProduct').valueChanges.subscribe(
    value => {
        data.Stores.forEach(filtered => {
            console.log(filtered.Products.filter(val => value.slice(1) >= val['Price']))
            console.log(filtered);
        });
    });

which print nothing to browser in my way:

<ul>
    <li *ngFor="let product of filtered">
        <img src={{product.ProductImage}}>
        <p>Product Price: {{ product.Price }}</p>
        <p>Product Title: {{ product.ProductTitle }}</p> 
    </li>
</ul>

How can I fix it?

Upvotes: 0

Views: 38

Answers (2)

Sunil
Sunil

Reputation: 11241

Make the following change in your code

this.myForm.get('filterProduct').valueChanges.subscribe(
    value => {
      data.Stores.forEach(filtered => {
        //USE FOLLOWING LINE
        this.filtered = filtered.Products.filter(val => value.slice(1) >= val['Price']);
        this.priceFilter = this.filtered.products; //Add to price filter.
     .
     .
     .

Upvotes: 0

alokstar
alokstar

Reputation: 499

In your template, you are trying to iterate through filtered array whereas from your code sample, it looks like you have not assigned any value to this array.

Upvotes: 1

Related Questions