我正在我的应用程序（Angular 14 + Ionic 6）中制作一个搜索页面，该页面使用GET方法通过API调用进行搜索，但遇到了一些问题。它不断向我的控制台返回“未定义”。还有一个问题是管道，我在输入中键入一些文本后，在控制台中收到此错误：TypeError: Cannot read properties of undefined (reading 'filter')
有没有人能看一看，帮帮我？：）

搜索服务ts：

searchCall(term: string) {
    return from(Preferences.get({key: 'TOKEN_KEY'})).pipe(
      switchMap(token => {
        const headers = new HttpHeaders().set('Authorization', `Bearer ${token.value}`);
        let params = new HttpParams();
        params = params.append('term', term);
        return this.httpClient.get(`${environment.apiUrl}search`, {headers, observe: 'response', params});
      }),
      catchError(err => {
        console.log(err.status);
        if (err.status === 400) {
          console.log(err.error.message);
        }
        if (err.status === 401) {
          this.authService.logout();
          this.router.navigateByUrl('/login', {replaceUrl: true});
        }
        return EMPTY;
      }),
    );
  }

搜索.页面.ts：

export class SearchPage implements OnInit {
  term = '';
  products: any = {
    id: '',
    name: '',
    product_code: '',
  };

  constructor(
    private searchService: SearchService,
  ) { }

  ngOnInit() {
    this.search(this.term);
  }

  search(term: string) {
    this.searchService.searchCall(term).subscribe(
      (data: any) => {
        console.log('Search: ' + data.body.products);
      },
      error => {
        console.log('Error', error);
      }
    );
  }

}

搜索.页面.html：

<ion-content [fullscreen]="true" class="ion-padding">
  <ion-searchbar [debounce]="1000" placeholder="Search" show-clear-button="focus" [(ngModel)]="term"></ion-searchbar>
  <ion-list>
    <ion-item  *ngFor="let produkt of products?.results | filter : term">
      <ion-label>{{ produkt.product_code }} {{ produkt.name }}</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

过滤器管ts：

export class FilterPipe implements PipeTransform {

  public transform(value: any[], filterText: string) {
    return filterText.length > 3 ? value.filter(x => x.name.toLowerCase().includes(filterText.toLowerCase())) : value;
  }

}

EDIT：按照注解中的要求，我还添加了导入模块中的代码：我的过滤器管道包含在共享的.module.ts文件中，代码如下：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FooterComponent } from '../navigation/footer/footer.component';
import { RouterLink } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { SideMenuComponent } from '../navigation/side-menu/side-menu.component';
import { SafeHtmlPipe } from '../pipes/safe-html.pipe';
import { FilterPipe } from '../pipes/filter.pipe';


@NgModule({
  declarations: [FooterComponent, SideMenuComponent, SafeHtmlPipe, FilterPipe],
  imports: [
    CommonModule,
    RouterLink,
    IonicModule
  ],
  exports: [FooterComponent, SideMenuComponent, SafeHtmlPipe, FilterPipe]
})
export class SharedModule { }

来自API的JSON响应如下所示：

[
    {
        "id": 3,
        "name": "test",
        "product_code": "45623146546"
    },
]