Angular 2 Typescript Pipes 过滤器不起作用

Question

我想通过 searchtext ngModel 文本框搜索 *ngFor 值，我正在从 dexie indexeddb 包装器绑定 ngFor。 在运行我的程序时出现一些错误，错误如下，请检查并帮助我。

Search.html 页面：

    <div id="custom-search-input">
                <div class="input-group col-sm-12">
                    <input type="text" class="form-control" placeholder="Search" [(ngModel)]="searchtext" />
                        <span class="input-group-btn">
                            <button class="btn btn-info" type="button">
                                <i class="glyphicon glyphicon-search"></i>
                            </button>
                        </span>
                </div>
             </div>
            <br>
            // here i'm using pipe filter
            <div class="card" *ngFor="let group of listgroups | filter: searchtext">
            <div class="card-header card-default col-sm-4 col-md-4 col-lg-4"><a>&nbsp;{{ group.GroupID }}</a> 
            </div>
            <div class="card-block">
            <p class="glyphicon glyphicon-user card-text card-default col-sm-8 col-md-8 col-lg-8">&nbsp;
                {{ group.GroupName }} </p>
            </div>
            </div>

component.ts 页面：

    import { Component,Pipes,PipeTransform } from '@angular/core';
    import { SearchGroupService } from 'app/Services/searchgroup.service';
    import { Router } from '@angular/router';
    import { FilterPipe } from './filter.pipe';


    @Component({
        selector : 'search',
        templateUrl : 'app/Views/searchgroup.html',
        pipes: [FilterPipe],
        providers: [SearchGroupService]
    })

    export class SearchGroupComponent implements PipeTransform { 
        id: id = [];
        x: any;
        name: name = [];
        totalcount: any;
        constructor(public rotuer: Router){
        //  this._searchgroupservice.getGroupService();private _searchgroupservice: SearchGroupService
         //  console.log(this._searchgroupservice.BindGroupDetails());
       //   this._searchgroupservice.BindGroupDetails();
         // this.router = Router;
        //  var _this = this;
        //  this.router = router;

      }

filter.pipe.ts 页面

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

    @Pipe({
        name: 'filter'
    })

    export class FilterPipe implemnts PipeTransform{

        transform(listgroups:any, searchtext:any):any {
            var searchtext = this.searchtext;
            var listgroups = this.listgroups;
            if(searchtext === undefined) return listgroups;

            return listgroups.filter(function(listgroups){
                return listgroups.GroupID.toLowerCase().includes(searchtext.toLowerCase()); 
            })
        }
    }

错误：

    TypeScript transpiling to CommonJS, consider setting module: "system" in typescriptOptions to transpile directly to System.register format npmcdn.com/plugin-typescript@4.0.10/lib/logger:20
    Failed to load resource: the server responded with a status of 404 (Not Found) http://127.0.0.1:58889/http-services/emulator-webserver/ripple/userapp/x/C/…nesh/Project/AngType_20161017/Test%20Old/www/app/Components/filter.pipe.ts
    Error: (SystemJS) XHR error (404 Not Found) loading http://127.0.0.1:58889/http-services/emulator-webserver/ripple/userapp/x/C/Users/admin/Desktop/Dinesh/Project/AngType_20161017/Test%20Old/www/app/Components/filter.pipe.ts
        Error: XHR error (404 Not Found) loading http://127.0.0.1:58889/http-services/emulator-webserver/ripple/userapp/x/C/Users/admin/Desktop/Dinesh/Project/AngType_20161017/Test%20Old/www/app/Components/filter.pipe.ts
            at ZoneDelegate.invoke (http://127.0.0.1:58889/http-services/emulator-webserver/ripple/userapp/x/C/Users/admin/Desktop/Dinesh/Project/AngType_20161017/Test%20Old/www/node_modules/zone.js/dist/zone.js:203:28)
            at Zone.runGuarded (http://127.0.0.1:58889/http-services/emulator-webserver/ripple/userapp/x/C/Users/admin/Desktop/Dinesh/Project/AngType_20161017/Test%20Old/www/node_modules/zone.js/dist/zone.js:110:47)
            at XMLHttpRequest.<anonymous> (http://127.0.0.1:58889/http-services/emulator-webserver/ripple/userapp/x/C/Users/admin/Desktop/Dinesh/Project/AngType_20161017/Test%20Old/www/node_modules/zone.js/dist/zone.js:86:29)
        Error loading http://127.0.0.1:58889/http-services/emulator-webserver/ripple/userapp/x/C/Users/admin/Desktop/Dinesh/Project/AngType_20161017/Test%20Old/www/app/Components/filter.pipe.ts as "./filter.pipe" from http://127.0.0.1:58889/http-services/emulator-webserver/ripple/userapp`enter code here`/x/C/Users/admin/Desktop/Dinesh/Project/AngType_20161017/Test%20Old/www/app/Components/searchgroup.component.ts** 

Answer 1

我认为问题出在这一行：

import { SearchGroupService } from 'app/Services/searchgroup.service';

在这里你导入一个不以./ 或../ 开头的文件，这表示你要导入一个模块，但不存在同名的模块。

由于缺少此文件（请参阅 404 状态），因此在加载应用程序时会出现问题。

已编辑答案

SystemJS 似乎在 Components 目录中找不到 filter.pipe.ts 文件。你确定这是文件所在的位置吗？如果不是，则您的导入不正确。

在你的组件中你有这个导入：

import { FilterPipe } from './filter.pipe';

这意味着filter.pipe.ts 位于组件旁边的Components 文件夹中。但是 SystemJS 抱怨它在那里找不到文件。我假设您的管道位于 Pipes 文件夹中，这意味着导入将是这样的：

 import { FilterPipe } from '../Pipes/filter.pipe';

希望对你有帮助。