Question

我正在angular4 -node.js部署的项目中进行单元测试。在测试时我发现了这个错误 -

Template parse errors:
The pipe 'filter' could not be found ("
  </thead>
  <tbody>
    <tr *ngFor="let[ERROR ->] dat of result | filter:filterdata| 
paginate: { itemsPerPage: 5, currentPage: p };let i = index ">

所以我将这两个模块添加到我的module.ts和spec.ts文件 - ＆gt;

import { PipesModule } from '../../pipes/pipes.module';
import { Pipe, PipeTransform } from '@angular/core';

@NgModule({
 imports: [PipesModule
 ],

对于此特定模块导入 - ＆gt;

import { PipesModule } from '../../pipes/pipes.module';

错误 - ＆gt;找不到模块'../../ pipes / pipes.module'。

请帮助解决问题

Answer 1

您必须在PipesModule的声明和导出中包含FilterPipe。

Answer 2

角度7/8-嵌套路线

如果您使用某些嵌套路线，并且在子组件中使用过滤器，请从app.modules.ts和：

中删除过滤器

用于自定义过滤器

在您的孩子childmodule.module.ts的声明部分中导入过滤器

用于ng2-search-filter

在孩子childmodule.module.ts的import部分中导入Ng2SearchPipeModule

Answer 3

在Angular中，共享通用指令，组件，管道等的一种好方法是使用所谓的共享模块。

这些模块声明并导出公共部分，以使它们可用于任何其他模块。

// other imports
import { filterPipe} from './{your-path}';

@NgModule({
  imports: [
    // dep modules
  ],
  declarations: [ 
    filterPipe
  ],
  exports: [
    filterPipe
  ]
})
export class PipesModule {}

然后，

将创建的ApplicationPipesModule模块导入到将要使用管道的模块中，方法是将其添加到imports数组

// other imports
import { PipesModule } from './{your-path}';   

    @NgModule({
     imports: [
       // other dep modules
       PipesModule 
     ],
     declarations: [],
     exports: []
    })
    export class MyModule1 {}

Answer 4

Hello以下是您可以查看的示例示例。

App.module.ts

import { NgModule, Component, Injectable  } from '@angular/core';
import { LimitToPipe } from './pipes/limit-to.pipe'; // your pipe path 

@NgModule({
 declarations: [
   LimitToPipe
 ]
});

创建limit-to.pipe.ts

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

    @Pipe({
      name: 'limitTo'
    })
    export class LimitToPipe implements PipeTransform {

    transform(value: string, args: string): string {
        const limit = args ? parseInt(args, 10) : 10;
        const trail = '...';
        return value.length > limit ? value.substring(0, limit) + trail : value;
      }
    }

导入您的组件

 import { LimitToPipe } from '../pipes/limit-to.pipe';

你的HTML中的

{{ name | limitTo :60 : 0 }}

单元测试（limit-to.pipe.spec.ts）

    import { LimitToPipe } from './limit-to.pipe'; // your custom pipe path

    describe('Pipe: LimitTo', () => {
      let pipe: LimitToPipe;

      beforeEach(() => {
        pipe = new LimitToPipe();
      });

      it('show 3 dot when string length is grater ther 15 chartacter', () => {
        expect(pipe.transform('my name is vikram sharma', '15')).toBe('my name is vikr...');
      });

      it('show full string when string length is less then 15 character', () => {
        expect(pipe.transform('my name is vikram sharma', '200')).toBe('my name is vikram sharma');
      });
    });

Answer 5

使用 npm 命令安装第三方搜索过滤包：

npm install ng2-search-filter

然后在app.module.ts中导入，

import { Ng2SearchPipeModule } from 'ng2-search-filter';

并将其添加到导入数组中，

imports:[Ng2SearchPipeModule]

https://www.remotestack.io/angular-search-filter-pipe-with-ng2-search-filter-tutorial/

错误 - ＆gt;使用angular4时找不到管道'过滤器'

5 个答案:

您可以安装搜索过滤器插件。