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 page

    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';

我希望有所帮助。

Angular 2 Typescript Pipes过滤器无法正常工作

1 个答案: