我似乎无法修复此错误。我有一个搜索栏和一个ngFor。我试图使用这样的自定义管道过滤数组:
import { Pipe, PipeTransform } from '@angular/core';
import { User } from '../user/user';
@Pipe({
name: 'usersPipe',
pure: false
})
export class UsersPipe implements PipeTransform {
transform(users: User [], searchTerm: string) {
return users.filter(user => user.name.indexOf(searchTerm) !== -1);
}
}
用法:
<input [(ngModel)]="searchTerm" type="text" placeholder="Search users">
<div *ngFor="let user of (users | usersPipe:searchTerm)">
...
</div>
错误:
zone.js:478 Unhandled Promise rejection: Template parse errors:
The pipe 'usersPipe' could not be found ("
<div class="row">
<div
[ERROR ->]*ngFor="let user of (user | usersPipe:searchTerm)">
角度版本:
"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
"@angular/forms": "0.3.0",
"@angular/http": "2.0.0-rc.5",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.26",
"bootstrap": "^3.3.6",
"zone.js": "^0.6.12"
确保您没有遇到“交叉模块”问题
如果使用管道的组件不属于已声明管道组件“全局”的模块,则找不到管道,并且您收到此错误消息。
在我的情况下,我已将管道声明为一个单独的模块,并将此管道模块导入任何其他具有使用管道的组件的模块中。
我已经声明了你正在使用管道的组件
管道模块
import { NgModule } from '@angular/core';
import { myDateFormat } from '../directives/myDateFormat';
@NgModule({
imports: [],
declarations: [myDateFormat],
exports: [myDateFormat],
})
export class PipeModule {
static forRoot() {
return {
ngModule: PipeModule,
providers: [],
};
}
}
在另一个模块中使用(例如app.module)
// Import APPLICATION MODULES
...
import { PipeModule } from './tools/PipeModule';
@NgModule({
imports: [
...
, PipeModule.forRoot()
....
],
您需要在模块声明中包含管道:
declarations: [ UsersPipe ],
providers: [UsersPipe]
我发现上面的“交叉模块”答案对我的情况非常有帮助,但是我想扩展它,因为还有另外一个需要考虑的问题。如果你有一个子模块,它在我的测试中也看不到父模块中的管道。出于这个原因,您可能需要将管道放入自己独立的模块中。
以下是我用来解决子模块中不可见的管道的步骤摘要:
上面“交叉模块”的另一个脚注回答:当我创建PipeModule时,我删除了forRoot静态方法,并在我的共享模块中导入了没有它的PipeModule。我的基本理解是forRoot对于像单例这样的场景很有用,它们不一定适用于过滤器。
对于Ionic,你可以面对@Karl提到的多个问题。对离子延迟加载页面完美运行的解决方案是:
// pipes.ts内容(里面可以有多个管道,请记住
use @Pipe function before each class)
import { PipeTransform, Pipe } from "@angular/core";
@Pipe({ name: "toArray" })
export class toArrayPipe implements PipeTransform {
transform(value, args: string[]): any {
if (!value) return value;
let keys = [];
for (let key in value) {
keys.push({ key: key, value: value[key] });
}
return keys;
}
}
// pipes.module.ts内容
import { NgModule } from "@angular/core";
import { IonicModule } from "ionic-angular";
import { toArrayPipe } from "./pipes";
@NgModule({
declarations: [toArrayPipe],
imports: [IonicModule],
exports: [toArrayPipe]
})
export class PipesModule {}
import { PipesModule } from "../pipes/pipes.module";
@NgModule({
imports: [
PipesModule
]
});
import { PipesModule } from "../../pipes/pipes.module";
@NgModule({
imports: [
PipesModule
]
})
<div *ngFor="let prop of myObject | toArray">{{ prop.key }}</div>
注意:仅当您不使用角度模块时
出于某种原因,这不在文档中,但我必须在组件中导入自定义管道
import {UsersPipe} from './users-filter.pipe'
@Component({
...
pipes: [UsersPipe]
})
import { Component, Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'timePipe'
})
export class TimeValuePipe implements PipeTransform {
transform(value: any, args?: any): any {
var hoursMinutes = value.split(/[.:]/);
var hours = parseInt(hoursMinutes[0], 10);
var minutes = hoursMinutes[1] ? parseInt(hoursMinutes[1], 10) : 0;
console.log('hours ', hours);
console.log('minutes ', minutes/60);
return (hours + minutes / 60).toFixed(2);
}
}
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular';
order = [
{
"order_status": "Still at Shop",
"order_id": "0:02"
},
{
"order_status": "On the way",
"order_id": "02:29"
},
{
"order_status": "Delivered",
"order_id": "16:14"
},
{
"order_status": "Delivered",
"order_id": "07:30"
}
]
}
Invoke this module in App.Module.ts file.
在这里建议另一个答案:
不需要为Pipe创建单独的模块,但绝对是一种替代方案。查看官方文档脚注:https://angular.io/guide/pipes#custom-pipes
您使用自定义管道的方式与使用内置管道的方式相同。 您必须在AppModule的声明数组中包含管道。如果选择将管道注入类中,则必须在NgModule的providers数组中提供它。
您所要做的就是将管道添加到声明数组,以及module
中要使用Pipe的providers数组。
declarations: [
...
CustomPipe,
...
],
providers: [
...
CustomPipe,
...
]
我在管道所在的同一目录中创建了一个管道模块
import { NgModule } from '@angular/core';
///import pipe...
import { Base64ToImage, TruncateString} from './'
@NgModule({
imports: [],
declarations: [Base64ToImage, TruncateString],
exports: [Base64ToImage, TruncateString]
})
export class SharedPipeModule { }
现在在app.module中导入该模块:
import {SharedPipeModule} from './pipe/shared.pipe.module'
@NgModule({
imports: [
...
, PipeModule.forRoot()
....
],
现在可以通过在嵌套模块中导入它来使用它