CODEWITHSUNDEEP
angularfilter
AnaCS
AnaCS

Reputation: 1011

filter in nested ngFor always undefined on source parameter Angular 8 Pipe

I am using Angular 8.

I have a filter that keeps me giving the value undefined for it's source parameter , and I dont understand why since I can always vizualise the element that the filter is considering undefined. I have the following filter:

filter(source :string, target :string, method:Method) : boolean {
    console.log("filter");
    console.log(source, target, method);
    switch(method) {

      case "includes" : return source.includes(target)
      case "equal"  : return source === target
      case "not-equal" : return source !== target
    }

  }

}

type Method ="includes" | "equal" | "not-equal"

And the following html that I can see all elements just fine if I don't apply the filter at all :

  <div *ngFor="let cat of filteredArray | filter : 'cat.category' : selectedCategory : 'equal'" >
          <mat-tab *ngFor="let errlist of cat.errors" label="{{errlist.letter}}">
              <div class="tab-content ">
                  <ul class="errorUL ">
                    <li *ngFor="let item of errlist.errorList  " >
                         {{item.id}} - {{item.description}}
                     </li>
                    </ul>
              </div>

so what I missing here? is this not how the filter works?

Upvotes: 1

Views: 738

Answers (3)

AnaCS
AnaCS

Reputation: 1011

I had written it wrong, with cat.category instead of just category

this is the correct way: 

 <div *ngFor="let cat  of filteredArray  | filter : 'category' : selectedCategory : 'equal'">

Upvotes: 0

jgritten
jgritten

Reputation: 1013

within your pipe, It appears to me that you're handling an array of objects as string, then returning a single string, not a filtered array of objects.

anyway, here's an example of a filter pipe I'm using

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'filter',
    pure: false
})
export class FilterPipe implements PipeTransform {

    transform(items: any, property: any, term: any): any {
        if (!term) {
            return items;
        }

        const result = items.filter(function (item) {

            if (item[property] === null) {
                return items;
            }
            if (item[property].toString().toLowerCase().includes(term.toLowerCase())) {
                return true;
            }
            return false;
        });
        if (result.length === 0) {
            return [-1];
        }
        return result;
    }
}

Upvotes: 1

Perrier
Perrier

Reputation: 2827

The declaration of your filter looks very confusing. I suppose you are using Angular with typescript and not AngularJs, so you have to use Pipes instead of filters. Here is the official guide upon this.

If you somehow still use AngularJS and filters, your filter declaration and usage is wrong in many ways. Please take a look at this tutorial. In short:

  • You don't use filter like filter : 'category'. As I can remember, you use the keyword you declared this filter to. Unfortunately I don't see any declaration like app.filter('makeUppercase', function () { you can find in the tutorial.
  • You don't have types in AngularJS method properties.
  • You have to tell AngularJS the name you want to reach this filter.
  • I don't see from where the source and selectedCategory properties should get their values?

Upvotes: 1

Related Questions