时间戳

首页 > 解决方案 > 如何在其各自的列中显示数据并按名称过滤，保持 Angular 中每一行的名称和年龄一致？

angular - 如何在其各自的列中显示数据并按名称过滤，保持 Angular 中每一行的名称和年龄一致？

问题描述

过滤器.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);
  });
 }
}

在这里我收到一个错误，例如“错误类型错误：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'}
    ];
  }

我想使用这样的数组，而不是：characters=['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>

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

标签： angular

解决方案

当项目为空或为空时会发生这种情况，请添加检查

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

推荐阅读