Question

我真的是Angular 7的新手，并开始使用Angular 7项目。为此，我制作了Angular 7自定义管道进行过滤，但是它不起作用。显示错误：模板解析错误。请参见下面我的模板代码，管道和给出的错误。希望任何人都能帮助我。

我正在使用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)

我想从选择下拉列表中按snippet_category过滤snippet_name，但是很遗憾，它不起作用。

Answer 1

请在相应的模块声明中添加EmailfilterPipe。

Angular 7自定义过滤器管道不起作用

1 个答案: