javascript - 使用输入框过滤 Angular 2 表

Question

我正在尝试使用管道过滤表。这是我的过滤器的代码。

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'myFilter'
})
export class MyFilterPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    return value.filter(item => item.name.indexOf(args[0]) !== -1);
  }
}

我在 app.module.ts 中导入了过滤器

    import { MyFilterPipe } from './common/my-filter.pipe';
    @NgModule({
  declarations: [
    MyFilterPipe
  ],

这是我的 View HTML 代码

<md-input-container>
    <md-icon>search</md-icon>
    <input mdInput placeholder="Favorite food"  [(ngModel)]="filterItem">
   </md-input-container> 
... 
<table>
<tr *ngFor="let item of items | myFilter: filterItem">
    <td>
      <a  href="#">
         <span >
         {{item.name}}
         </span>
      </a>
    </td>
    <td>
        <div>{{item.value1}}</div>
      <div>{{item.value2}}</div>
    </td>
    <td>
        <span >
         item.description
        </span>
    </td>
  </tr>
</table>

当我尝试查看该页面时，浏览器中出现此错误:“无法读取未定义的属性“0”。”由于过滤器的原因，该页面不想加载。我的猜测是，由于 filterItem 最初是空的，这会阻止页面加载。但我不知道如何解决。任何帮助将不胜感激!谢谢!

Answer 1

My guess is that since filterItem is empty initially, this prevents the page to load.

事实上，它未定义。

可以通过以下方式解决该问题:

transform(value: any, args?: any): any {
  return !!args ? value.filter(item => item.name.indexOf(args[0]) !== -1) : value;
}