Угловой, труба фильтра возвращает пустые данные / ложь

Question

По этой ссылке я пытаюсь следовать учебному пособию по пользовательскому каналу фильтрации, но когда я запускаю свой проект в браузере, таблица становится пустой. Я не уверен, что я должен сделать, чтобы исправить это. Я уже использую импорт import { FilterPipe } from './filter.pipe'; на app.component.ts и объявление в module.ts.

//filter.pipe.ts

transform(productList: any, term: any): any {
  if (term === undefined) return productList;

  //not sure, but i think it causes by this line
  return productList.filter(function(Product) {
    return Product.prdName.toLowerCase().includes(term.toLowerCase());
  })
}

<form id="filter">
  <input type="text" class="form-control" name="term" [(ngModel)]="term" placeholder="filter by name" />
</form>

<tr *ngFor="let product of productList | filter: term">
  <td>{{product.prdName}}</td>
  <!--other table data-->
  <td>

Когда я удаляю | filter: term" часть данных таблицы показала, но когда я положил ее обратно, данные таблицы ничего не показывают. Может ли кто-нибудь помочь мне понять это? Извините за мой плохой английский.

Answer 1

В твоем компоненте как инициализируется термин переменная?

потому что это, возможно, не неопределено, но это null или empty (''), в начальном состоянии попробуйте сравнить с null, undefined и ''.

Answer 2

Я думаю, вам нужно добавить проверку, если термин является нулевым. Вы могли бы реализовать свою трубу следующим образом,

export class MyFilterPipe implements PipeTransform {

    transform(items: any[], term: any[]): any {
      if (!term) 
        return items;
      return items.filter(item => item.productName.indexOf(term) > -1);
    }
}

DEMO