angular2管道無法正常工作

Question

我正在嘗試在angular2中具有搜索功能。

到目前為止，我已經為此創建了自己的自定義管道，如下所示：

search.pipe.ts

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

@Pipe({
    name: 'search',
    pure: false
})
@Injectable()
export class SearchPipe implements PipeTransform {
    transform(components: any[], args: any): any {
        var val = args[0];
        if (val !== undefined) {
            var lowerEnabled = args.length > 1 ? args[1] : false;

            // filter components array, components which match and return true will be kept, false will be filtered out
            return components.filter((component) => {
                if (lowerEnabled) {
                    return (component.name.toLowerCase().indexOf(val.toLowerCase()) !== -1);
                } else {
                    return (component.name.indexOf(val) !== -1);
                }
            });
       }
       return components;
    }
}

在執行此操作后，我嘗試在html內應用此管道，如下所示：

*ngFor="let aComponent of selectedLib.componentGroups[groupCounter].components | search:searchComp:true"

它給我下面的錯誤：

TypeError：無法讀取未定義的屬性“ 0”

當我不應用管道時，* ngFor可以正確打印數組元素，但是一旦我在html中應用搜索管道，它就會給我上述錯誤。

有輸入嗎？

Answer 1

RC中的新管道采用幾個參數，而不是一個數組：

transform(components: any[], searchComponent: any, caseInsensitive: boolean): any {
    if (searchComponent !== undefined) {
        // filter components array, components which match and return true will be kept, false will be filtered out
        return components.filter((component) => {
            if (caseInsensitive) {
                return (component.name.toLowerCase().indexOf(searchComponent.toLowerCase()) !== -1);
            } else {
                return (component.name.indexOf(searchComponent) !== -1);
            }
        });
   }
   return components;
}