如何在 Angular 中按数组中的属性过滤对象？

Question

I have an element which is an array. I want to show the title of one of this objects by filtering in the array. Like:

<p>{{ element | myFilter:'type':'Type1').title }}</p>

So I tried to create an pipe filter:

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

@Pipe({
    name: 'myFilter',
    pure: false
})
export class MyFilterPipe implements PipeTransform {
    transform(items: any[], filter: Object): any {
        if (!items || !filter) {
            return items;
        }
        return items.filter(item => item.title.indexOf(filter.type) !== -1);
    }
}

But that didn't work.

My array:

[
      {
       "type": "Type1",
       "title": "Message 1"
      }, 
      {
       "type": "Type2",
       "title": "Message 2"
      }
]

And what I want to show is the title of type 1. Like:

<p>{{ element | myFilter:'type':'Type1').title}}</p>

How to do this in Angular?

Stackblitz

Answer 1

You are passing the data incorrectly into the pipe, also the brackets are placed incorrectly. You should fix the brackets and just pass the data as a string:

<p>{{ (element | myFilter: 'Type1').title }}</p>

Also you are filtering your pipe on the wrong property. With the updated data input for the pipe it should simply be:

export class MyFilterPipe implements PipeTransform {
  transform(items: any[], filter: string): any {
    if (!items || !filter) {
      return items;
    }
    return items.find(item => item.type === filter);
  }
}

Answer 2

The way you are passing your filter object to the pipe is incorrect. You are passing strings.

Use like this:

<p>{{ (element | myFilter: {'type':'Type1'})?.title }}</p>`

Also a ( is missing from the start of your statement