Question

下面是我的自定义管道，在该管道中，我无法访问Item类型的customfilter数组的成员。

   import { Pipe, PipeTransform } from '@angular/core';
import {Bus} from '/home/pavan/Desktop/Pavan/apstrtcAngular/src/app/Bus';
import { Item } from './Item';

@Pipe({
  name: 'busFilter'

})
export class BusFilterPipe implements PipeTransform {

  transform(items: Bus[], customfilter: Item): Bus[] {
    if(!items || !customfilter)
    {
      return items;
    }
    return items.filter((item: Bus)=> 
    this.applyFilter(item, customfilter));
  }

  applyFilter(bus:Bus, customfilter: Item):

    boolean{


        if( customfilter[0].item_id){
          if(typeof customfilter[0].item_id==='string'){
            if(typeof bus.bustype==='string')
            {
            if(customfilter[0].item_id===bus.bustype)
              {
                return false;
              }
          } }

        }

      return true;
    }

}

下面是我的Item.ts和ng多选。

export class Item {
    /**
     * @type {number} id Unique numeric identifier.
     */
    item_id: string;
    item_text:string;
  }

<ng-multiselect-dropdown class="ngfilter"
              [placeholder]="'Select BusType'"
              [data]="BusTypes"
              [(ngModel)]="customfilter"
              [settings]="dropdownSettings"
              (onSelect)="onItemSelect($event)"
              (onSelectAll)="onSelectAll($event)"></ng-multiselect-dropdown>

我在这里找不到问题，调试期间也无法查看item_id的值。请帮助我知道问题出在哪里。谢谢。

Answer 1

import { Pipe, PipeTransform } from '@angular/core';
import {Bus} from '/home/pavan/Desktop/Pavan/apstrtcAngular/src/app/Bus';
import { Item } from './Item';
import { forEach } from '@angular/router/src/utils/collection';

@Pipe({
  name: 'busFilter'
})
  export class BusFilterPipe implements PipeTransform 
  {

        transform(items: Bus[], customfilter: Item[]): Bus[] {
          let ResultSet: Bus[] = [];
          if (!items || !customfilter) {
            return items;
          }
          else if (customfilter.length == 0) {
            return items;
          }
          else{
          for (let i = 0; i < items.length; i++) {
            for (let j = 0; j < customfilter.length; j++) {
              if (customfilter[j].item_text === items[i].bustype) {
                ResultSet.push(items[i]);
                console.log("Result Set =" + ResultSet);
              }
            }
          }
          return ResultSet;
        }
      }
      }

Answer 2

根据您的评论以及对您在管道中编写的代码的理解，请按以下方式修改管道（请仔细阅读代码中的注释）：

transform(items: Bus[], customfilter: Item[]): Bus[] {

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

    // making custom filter an Array if it isn't already
    customFilter = customFilter instanceof Array ? customFilter : [customFilter];

    // you seem to ignore the custom filters which don't have item_id
    customFilter = customFilter.filter((eachCustom) => eachCustom.item_id);

    // create an array of new items which satisfy your criteria
    return items.reduce((acc, eachBus) => {
        // if bus's bustype is not string then no need to filter
        if (typeof eachBus.bustype != 'string') {
            acc.push(eachBus)
        }
        else {
            // if the bustype is a string
            // then you have to see if this bus's bustype matches any of the custom filters and it's id type
            // if not found then that bus should be present in the final bus list
            let filterFound = customFilter.findIndex((eachFilter) => {
                return (typeof eachFilter.item_id === 'string') && (typeof eachBus.bustype === 'string') && (eachFilter.item_id === eachBus.bustype);
            });

            if (filterFound === -1) {
                // this bus is not found in the filter
                acc.push(eachBus)
            }
        }
        return acc;

    }, [])

}

以下是javascript中的脚本，用于验证结果

function transform(items, customfilter) {

    if(!items || !customfilter)
    {
      return items;
    }

    // making custom filter an Array if it isn't already
    customFilter = customFilter instanceof Array ? customFilter : [customFilter];

    // you seem to ignore the custom filters which don't have item_id
    customFilter = customFilter.filter((eachCustom) => eachCustom.item_id);

    // create an array of new items which satisfy your criteria
    return items.reduce((acc, eachBus) => {
        // if bus's bustype is not string then no need to filter
        if (typeof eachBus.bustype != 'string') {
            acc.push(eachBus)
        }
        else {
            // if the bustype is a string
            // then you have to see if this bus's bustype matches any of the custom filters and it's id type
            // if not found then that bus should be present in the final bus list
            let filterFound = customFilter.findIndex((eachFilter) => {
                return (typeof eachFilter.item_id === 'string') && (typeof eachBus.bustype === 'string') && (eachFilter.item_id === eachBus.bustype);
            });

            if (filterFound === -1) {
                // this bus is not found in the filter
                acc.push(eachBus)
            }
        }
        return acc;

    }, [])

}


let buses = [{bustype: 1}, {bustype: "volvo-ac"}, {bustype: "volvo-non-ac"}, {bustype: "non-volvo-ac"}, {bustype: "non-volvo-non-ac"}]
let customFilter = [{item_id: "volvo-ac"}, {item_id: "non-volvo-ac"}]
console.log(transform(buses, customFilter))
// expected output won't contain the buses present in the filter

Angular，无法在自定义管道中访问数组中对象的成员

2 个答案: