Angular, TypeError: Cannot read property 'toLowerCase' of undefined

Question

i'm trying to make a custom filter pipe by following this link, but i got error that said Angular, TypeError: Cannot read property 'toLowerCase' of undefined. I already imported the pipe to app.module.ts and also declared it in declaration. Can anyone help me with this error?

<form id="filter">
  <input type="text" class="form-control" name="term" [(ngModel)]="term" placeholder="filter by name" />
</form>

<tr *ngFor="let product of productList | paginate: { itemsPerPage: 1, currentPage: p } | filter: term">
  <td>{{product.prdName}}</td>
  <td>{{product.prdCat}}</td>
  <td>{{product.prdSup}}</td>
</tr>

@Pipe({
  name: 'filter'
})


transform(prdName: any, term: any): any {
    if (term === undefined) return prdName;

    return prdName.filter(function(Product) {
      return Product.name.toLowerCase().includes(term.toLowerCase());
    })

Chandru · Accepted Answer · 2017-11-17 09:53:02Z

4

try like this :

transform(items: any, term: any): any {
    if (term === undefined) return items;

    return items.filter(function(Product) {
        return Product.prdName.toLowerCase().includes(term.toLowerCase());
    })
}

answered Nov 17, 2017 at 9:53

Chandru

11.2k6 gold badges43 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Christian Benseler · Accepted Answer · 2017-11-17 09:22:58Z

1

Is the attribute called 'name' or 'prdName' (the one you used in the template is 'prdName')?

transform(values, args) {
    values.filter(
      product => product.prdName.toLowerCase().includes(args.toLowerCase())
    )
}

edited Nov 17, 2017 at 9:22

answered Nov 17, 2017 at 9:18

Christian Benseler

8,0839 gold badges42 silver badges73 bronze badges

2 Comments

Wira Xie Over a year ago

it is prdName in component.html and component.ts

Christian Benseler Over a year ago

@WiraXie I have updated my answer with some changes I guess will make your code better.

Collectives™ on Stack Overflow

Angular, TypeError: Cannot read property 'toLowerCase' of undefined

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related