Не работает канал пользовательского фильтра Angular 7

#pipe #angular7

#канал #angular7

Вопрос:

Я действительно новичок в 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 amp;amp; args != undefined amp;amp; 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_name по snippet_category из выпадающего списка выбора, но, к сожалению, это не работает.

Ответ №1:

Пожалуйста, добавьте EmailfilterPipe в соответствующее объявление модуля.

Комментарии:

1. Спасибо @Prashanthi за вашего участника, и проблемы исправлены