angular 使用多级键过滤文本的管道

Question

我有一个 angular 管道，它只是从 ngFor 中过滤出文本。它适用于单层 json 对象，但在存在多层对象时失败。

管道：

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

@Pipe({   name: 'simpleSearch' })
  export class SimpleSearchPipe implements PipeTransform {

  public transform(value, keys: string, term: string) {

    if (!term) return value;
    return (value || [])
        .filter(item => 
             keys.split(',').some(key => {
                item.hasOwnProperty(key) && new RegExp(term, 'gi').test(item[key])
             })
        );
   }
}

模板：

<div *ngFor="let issue of issuesData
      | simpleSearch: 'key,fields.summary,fields.priority.name': searchTerm"
></div>

此处搜索对字段 "key"（json 对象的第 1 层）非常有效，但对其他键无效。

谁能帮我解决这个问题，或者如果您需要更多信息，请告诉我。

Answer 1

基于此提取嵌套对象值：

var myObj = {
    key: 'myKcley',
    fields: {
        summary: 'asdf'
    }
};

var getNestedObject = (nestedObj, pathArr) => {
    return pathArr.reduce((obj, key) =>
        (obj && obj[key] !== 'undefined') ? obj[key] : undefined, nestedObj);
}

var objKeys = 'key, fields.summary';
objKeys.split(',').forEach(key => {
    if(key.includes('.')) {
        var keyArray = key.trim().split('.');

        var value = getNestedObject(myObj, keyArray);
        console.log(value);

    }
});

Answer 2

尝试使用lodash的get()功能：

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

import * as lodash from 'lodash';

@Pipe({ name: 'simpleSearch' })
export class SimpleSearchPipe implements PipeTransform {

  public transform(value, keys: string, term: string) {

    if (!term) return value;
    return (value || [])
      .filter(item =>
        keys.split(',').some(key => {
          const val = lodash.get(item, key, undefined);
          return val !== undefined && new RegExp(term, 'gi').test(val);
        })
      );
  }
}

此外，在您的 some() 函数中，您需要通过提供 return 语句或删除大括号来 return 布尔值。我在你的代码中添加了 return。

STACKBLITZ

angular 使用多级键过滤文本的管道

angular pipe to filter text with multi level key

javascript

angular-pipe

angular

管道：

模板：