Question

我的模板：

<tbody *ngFor="let abcList of abcLists | filterdata: srchTerm; let i = index">
  {{abcList .name}}
</tbody>`

abcLists的数据：

abcLists = [
  {
    'id': 1,
    'date': '02/04/2017',
    'name': 'The Hero',
    'size': '1.8 GB',
    'network': 'hfg',
    'services': 'wughf',
    'content_owner': 'Any',
    'contact_email': 'iwygf'
  }]

自定义过滤器

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'filterdata'
})
export class FilterPipeComponent implements PipeTransform {

  transform (value: any[], args: any[]){
    const search = args[0].value;
    console.log(search)
    if (!search) return value;

    return value.filter(item => 
      (item.name == search || item.services == search || 
      item.content_type == search || 
      item.network == search || item.size == search 
      || item.service == search)
    );
  }
}

在控制台上加载组件错误时抛出：

abcComponent - 内联模板：56：27引起：无法读取属性未定义的'0'

Answer 1

您可以尝试使用...agrs来获取不确定的参数计数。但无论如何都必须处理非参数分支，在使用之前也要检查参数是否存在。

见下面的例子：

function test(...args) {
  console.log(args.length);
}


test();

test('a');

test('a', 'b');

test('a', 'b', 'c');

添加示例以在Array.some中使用Array.filter以过滤多个关键字。

function tranform(input, args) {
  return input.filter(item => {
    return args.some(arg => {
      return item.field1 === arg || item.field2 === arg;
    });
  });
}

var arr = [
  {
    field1: 'test1',
    field2: 'test2'
  },{
    field1: 'test11',
    field2: 'test22'
  },{
    field1: 'test33',
    field2: 'test44'
  }
];

console.log(tranform(arr, ['test1', 'test11']));

Answer 2

你的srchTerm必须是一个字符串而不是一个数组。

您可以像这样使用过滤器。 <div *ngFor="let abcList of (abcLists | srchTerm)"> {{abcList.name}} </div>

在角度2中使用自定义管道，无法在加载html时加载数据抛出错误，无法读取未定义的属性

2 个答案: