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

Can 发表于 Dev

能

我有一个元素，它是一个数组。我想通过在数组中过滤来显示其中一个对象的标题。像：

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

所以我尝试创建一个管道过滤器：

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);
    }
}

但这没有用。

我的阵列：

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

我想展示的是类型 1 的标题。比如：

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

如何在 Angular 中做到这一点？

闪电战

汤姆缪尔

您将数据错误地传递到管道中，括号也放置不正确。您应该修复括号并将数据作为字符串传递：

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

此外，您正在根据错误的属性过滤管道。使用管道的更新数据输入，它应该只是：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。