过滤多面阵列，但管道返回错误 - 找不到'对象'类型的不同支持对象'[object Object]'

Question

I am trying to filter output, but one field in the array is an array.

When I'am filter all - I get all. If I filter for any subset, the console.log(items[i].tags) output in array foramat ["Skills", "Learning"] . The 2nd console.log displays the item in the array (with both tags)

The return throws the error:

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays. at NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngDoCheck

... in the HTML:

<span *ngFor="let page of page | tags: tag  ; #nGForArray>

... The page array

[ { 
        "id" : "1", 
        "title" : "Security",  
        "tags" : ["Skills", "Learning"]
    },
{ 
        "id" : "2", 
        "title" : "Home Improvement",  
        "tags" : ["Skills"]
    },

{ 
        "id" : "3", 
        "title" : "Mathematics",  
        "tags" : [""Learning"]
    }
]

... in search.pipe.ts

export class TagPipe implements PipeTransform {

    transform(items: any[], tag: string): any {

        if (!items || !tag) {
            return items;
        }

        var filtertags: any[];

        for (let i = 0; i < items.length; i++) {
            console.log(items[i].tags);
            for (let j = 0; j < items[i].tags.length; i++) {
                if (tag == items[i].tags[j]) {
                    console.log(items[i]);
                    return items[i];
                }
            }

        }
        console.log("end of transform");
        console.log(filtertags);
        return filtertags;

    }

}

I need the results to find any record where one of the tags matches the filter.

Answer 1

I made some changes in your transform method, not changing your logic, and commented them below.

Also if you are modifying your items in execution time, you may need define your pipe as impure. Just add "pure: false" to your pipe, like @Pipe({ name: "blabla", pure: false })

 transform(items: any[], tag: string): any {
    if (!items || !tag) {
      return items;
    }

    //initialized it
    var filtertags: any[] = [];

    for (let i = 0; i < items.length; i++) {
      console.log(items[i].tags);
      //it was increasing i instead of j
      for (let j = 0; j < items[i].tags.length; j++) {
        if (tag == items[i].tags[j]) {
          console.log(items[i]);
          //instead of returning, push to the filtertags array
          filtertags.push(items[i]);
        }
      }

    }
    console.log("end of transform");
    console.log(filtertags);
    return filtertags;
  }