Угловые пользовательские трубы возвращают ошибку с табличными данными - PullRequest
Новая
       26

Угловые пользовательские трубы возвращают ошибку с табличными данными

0 голосов
/ 20 сентября 2018

component.html: 

<input 
  type="text" 
  [(ngModel)]="searchText" 
  placeholder="search your products here" 
  name="searchText">

<table class="table table-bordered">
  <thead>
    <tr>
      <th>Id</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let obj of product| filter: searchText">
      <td>{{obj.id}}</td>
      <td>{{obj.description}}</td>
    </tr>
  </tbody>
</table>

filter.ts: 

transform(items: any, searchText: string): any[] {
  if (!items || !searchText || searchText === undefined) {
    return items;
  }

  return items.filter(items =>
    items.description.toLowerCase().includes(searchText.toLowerCase));
}

Консоль отображает элементы. Описание не определено.

model.ts: 

export class products{
  id: number;
  description: string;    
}

Нет ошибки до загрузки страницы, как только я начинаю печатать в окне поиска, отображается сообщение об ошибке. Ошибка показана в следующем коде. 

<input 
  type="text" 
  [(ngModel)]="searchText" 
  placeholder="search your issues here" 
  name="searchText">

1 Ответ

0 голосов
/ 20 сентября 2018

Вы не звоните searchText.toLowerCase здесь.Вам нужно позвонить.Кроме того, вы называете вход и каждый элемент как items.Вероятно, это еще одна проблема.

Измените реализацию transform на: 

transform(items: any, searchText: string): any[] {
  if (!items || !searchText || searchText === undefined) {
    return items;
  }

  return items.filter(item =>
    item.description.toLowerCase().includes(searchText.toLowerCase()));
}

Если, конечно, это опечатка в вашем ОП.

Вот Образец StackBlitz для справки.

...