Question

filter.pipe.ts

@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: any[], searchText: string): any[] {
   if(!items) return [];
   if(!searchText) return items;
    searchText = searchText.toLowerCase();
   return items.filter( it => {
  return it.toLowerCase().includes(searchText);
  });
 }
}

在这里我得到一个错误，例如“ ERROR TypeError：it.toLowerCase不是一个函数”

app.component.ts

   @Component({
   selector: 'my-app',
   templateUrl: './app.component.html'
  })

  export class AppComponent  {
     name = 'Angular';

  characters  = [
     {name:'Finn the shark',age:'10'},
     {name:'Jake the dog',age:'4'},
     {name:'Princess Bubble gum',age:'1'}
    ];
  }

我想使用这样的数组，而不是：character = ['Finn the shark'，'Jake the dog'，'Princess Bubble gum'];

HTML

<input [(ngModel)]="searchText" placeholder="search text goes here">
<table>

  <tr>
    <th>Characters</th>
    <th>Age</th>
  </tr>


  <tr *ngFor="let c of characters | filter : searchText   let i = index">
   <th>{{characters[i].name}}</th>
   <th>{{characters[i].age}}</th>
  </tr>

</table>

表将按预期填充，但是过滤器不起作用:(

Answer 1

当项目为空或为空时，请添加支票

if(items && items.length > 0){
 return items.filter( it => {
  return it.toLowerCase().includes(searchText);
});
}

如何在其相应的列中显示数据并按名称过滤，以使Angular中的每一行的名称和年龄保持一致？

1 个答案: