Блог

Я следил за этим сайтом, чтобы добавить компонент поиска в свой angular. Я проверил ранее опубликованные вопросы, но, тем не менее, я не могу найти решение для этой ошибки — «Не удалось найти «фильтр»канала»». Заранее спасибо за помощь!

Вот код
app.module.ts

 import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent } from './app';
import { SearchByEventNameComponent } from './search-by-event-name/search-by-event-name.component';
import { Ng2SearchPipeModule } from 'ng2-search-filter';

@NgModule({
  imports: [
     BrowserModule, 
     Ng2SearchPipeModule
  ],
  declarations: [AppComponent,SearchByEventNameComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}
  

поиск по имени события.component.ts

 import { Component, OnInit } from '@angular/core';
import { Ng2SearchPipeModule } from 'ng2-search-filter';


@Component({
  selector: 'app-search-by-event-name',
  templateUrl: './search-by-event-name.component.html',
  styleUrls: ['./search-by-event-name.component.css']
})
export class SearchByEventNameComponent implements OnInit {
  }
  term: string;

  filterData = [
    {
      firstName: 'Celestine',
      lastName: 'Schimmel',
      address: '7687 Jadon Port'
    },
    {
      firstName: 'Johan',
      lastName: 'Ziemann PhD',
      address: '156 Streich Ports'
    },
    {
      firstName: 'Lizzie',
      lastName: 'Schumm',
      address: '5203 Jordon Center'
    },
    {
      firstName: 'Gavin',
      lastName: 'Leannon',
      address: '91057 Davion Club'
    },
    {
      firstName: 'Lucious',
      lastName: 'Leuschke',
      address: '16288 Reichel Harbor'
    }
  ]

}
  

search-by-event-name.component.html

 <div class="form-group">
        <input type="text" class="form-control" placeholder="Search Here" [(ngModel)]="term">
    </div>

    <table class="table">
        <thead>
            <tr>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Address</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let item of filterData | filter:term">
                <td>{{item.firstName}}</td>
                <td>{{item.lastName}}</td>
                <td>{{item.address}}</td>
            </tr>
        </tbody>
    </table>
  

Просмотр кода может помочь.

1. Вы включили свой канал в declarations поле NgModule метаданных?
2. Это NgModule то же самое, что объявляет ваш Component ? Если нет, то NgModule ваш Component имеет отношение к import первому (который тоже относится к export каналу).

• https://angular.io/guide/pipes#creating-pipes-for-custom-data-transformations