0

I tried to filter the products using a pipe (if no filter choosing from the list I will show all the products) But I'm getting an error. why?

<h2>store</h2>
    <select [(ngModel)]="selectedOption" name=Gender>
      <option *ngFor="let g of GenderFilter">{{g.DisplayText}}</option>
    </select>
    <select>
        <select [(ngModel)]="selectedOptionPrice" name=Price>
      <option *ngFor="let p of PriceFilter">{{p.DisplayText}}</option>
    </select>
    <tr *ngFor="let P of products | filer : Gender | orderBy: 'GenderFilter'">
      <td>{{p.DisplayText}}</td>
    </tr>
    <tr *ngFor="let P of products | filer : Price | orderBy: 'PriceFilter'">
      <td>{{p.DisplayText}}</td>
    </tr>
    <ul>
      <li *ngFor="let store of stores">
        <ul>
          <li *ngFor="let product of store.Products">
              <img src={{product.ProductImage}}>
              <p>store: {{ store.StoreName }}</p>
              <p>Product Price: {{ product.Price | currency}}</p>
            <p>Product Title: {{ product.ProductTitle }}</p>
          </li>
        </ul>
      </li>
    </ul> 
T. Shashwat
  • 1,135
  • 10
  • 23
Dina93
  • 25
  • 6
  • What error are you facing? – Talha Junaid Oct 22 '18 at 04:59
  • @TalhaJunaidCan't bind to 'ngModel' since it isn't a known property of 'select'. ("

    store

    – Dina93 Oct 22 '18 at 05:01
  • did you import `FormsModule` inside your `*.module.ts` file?? – Sanoj_V Oct 22 '18 at 05:04
  • Possible duplicate of [Can't bind to 'ngModel' since it isn't a known property of 'input'](https://stackoverflow.com/questions/38892771/cant-bind-to-ngmodel-since-it-isnt-a-known-property-of-input) – Amit Chigadani Oct 22 '18 at 05:06

1 Answers1

1

Possible reason can be Missing FormsModule, hence Add this to your Module,

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
    imports: [
        FormsModule      
    ]

or Check the syntax/spelling of [(ngModel)] in the select

T. Shashwat
  • 1,135
  • 10
  • 23
  • Thank you! you're right. Just now the filter not working – Dina93 Oct 22 '18 at 05:50
  • Pipe would be best approach. but you can try this too.
    // code
    – T. Shashwat Oct 22 '18 at 06:02
  • Thanks. can you please explain how to do it with pipe? thanks! – Dina93 Oct 22 '18 at 06:09
  • can you share a stackblitz of your work it would be easier to get the issue – T. Shashwat Oct 22 '18 at 06:13
  • https://stackblitz.com/edit/angular-pxfqwk?file=src%2Fapp%2Forderby.pipe.ts Thanks!! – Dina93 Oct 22 '18 at 06:30
  • Thank you!! Trying to fix it but nothing change – Dina93 Oct 22 '18 at 13:58
  • Hi ur stackblitz is giving error and not running , may be https://github.com/VadimDez/ngx-order-pipe this can help you get sorted – T. Shashwat Oct 22 '18 at 14:22
  • Thanks! I will look. can't I see ngx-order-pipe --save? – Dina93 Oct 22 '18 at 15:31
  • And the diffrent is I need to show the products filtered by "price filter"I will check thanks – Dina93 Oct 22 '18 at 15:41
  • working code snippet: @Pipe({ name: "sort" }) export class ArraySortPipe implements PipeTransform { transform(array: any[], field: string): any[] { array.sort((a: any, b: any) => { if (a[field] < b[field]) { return -1; } else if (a[field] > b[field]) { return 1; } else { return 0; } }); return array; } } and *ngFor="let myObj of myArr | sort:'fieldName'" hope this is enough if you give a try – T. Shashwat Oct 23 '18 at 04:31