pipe - Angular 7 自定义过滤管不工作
问题描述
我对 Angular 7 非常陌生,并开始使用 Angular 7 项目为此我制作了 Angular 7 Custom Pipe 进行过滤,但它不起作用。显示错误:模板解析错误。请参阅下面我的模板代码、管道和给出的错误。希望有人可以帮助我。
我正在使用 Angular 7、Node.Js API 和 MongoDB。
Template
<div class="template_right">
<p>Snippets</p>
<div class="styled">
<select [(ngModel)]="filterText">
<option
*ngFor="let showsnippets_categorie of showsnippets_categories"
[(ngValue)]="showsnippets_categorie.snippet_category_name">
{{showsnippets_categorie.snippet_category_name}}
</option>
</select>
</div>
<span (click)="addCategory()">Add Category</span>
<span *ngFor="let showsnippet of showsnippets | emailfilter: filterText " (click)="getSnippetId(showsnippet)">{{showsnippet.snippet_name}}</span>
</div>
Pipe
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'emailfilter',
pure: false
})
export class EmailfilterPipe implements PipeTransform {
transform(value: any, args?: any): any {
return value.filter(items=>{
return items.snippet_category.startsWith(args) == true
});
}
}
// And
import { Pipe, PipeTransform } from '@angular/core';
import { filter } from 'rxjs/operators';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform( items: any = [], args: string ):any {
if (items != null && args != undefined && args != ''){
return items.filter(item=>item.snippet_category.indexOf(args)!== -1);
}
console.log("else")
return items;
}
}
Finally get the error below
core.js:14597 ERROR Error: Uncaught (in promise): Error: Template parse errors:
The pipe 'emailfilter' could not be found ("ategory()">Add Category</span>
<span *ngFor="let showsni[ERROR ->]ppet of showsnippets | emailfilter: filterText " (click)="getSnippetId(showsnippet)">{{showsnippet.sn"): ng:///AdminLayoutModule/EmailsComponent.html@37:45
Error: Template parse errors:
The pipe 'emailfilter' could not be found ("ategory()">Add Category</span>
<span *ngFor="let showsni[ERROR ->]ppet of showsnippets | emailfilter: filterText " (click)="getSnippetId(showsnippet)">{{showsnippet.sn"): ng:///AdminLayoutModule/EmailsComponent.html@37:45
at syntaxError (compiler.js:2427)
at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:20311)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:25857)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:25844)
at compiler.js:25787
at Set.forEach (<anonymous>)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:25787)
at compiler.js:25697
at Object.then (compiler.js:2418)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:25696)
at resolvePromise (zone.js:814)
at resolvePromise (zone.js:771)
at zone.js:873
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:16147)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
at drainMicroTaskQueue (zone.js:595)
我想从选择下拉列表中按片段类别过滤片段名称,但不幸的是它不起作用。
解决方案
请在相应的模块声明中添加 EmailfilterPipe。
推荐阅读
- jquery - 在 Materializecss 上将 Chrome 版本更新到 73 后,Clockpicker 立即显示和隐藏
- javascript - 元件相对于另一个元件的非线性运动
- ios - 如何使用mailcore2获取邮件的发件人资料图片
- asp.net-core - 正文是正确的,那么为什么 post 值是 null
- active-directory - 使用 Graph API(c# .Net windows 服务)更新 Azure Active Directory 上的用户图像
- mongodb - 如何在 MongoDB 中使用时间序列数据计算回报
- python-3.x - 在训练时使用 Tensorboard 获取实时 keras 模型统计信息
- angular - 来自套接字 io 的数据并未全部显示在视图中
- ats - 证明如果 string_is_prefix 返回 true,则字符串的长度与前缀一样大
- android - 屏幕密度与分辨率的关系