Html 如何在angular 7中的表格中添加搜索过滤器

我有一个表，它的数据来自循环，我还需要向其中添加搜索功能，我曾尝试创建自定义管道，但它不起作用，请任何人帮助我，下面是代码

app.component.html

---

首先，像这样更新html输入和表数组

<input type="text" placeholder="search.." (input)="onChange($event.target.value)" >
<table class="table border">
    <thead>
    <tr>
      <ng-container *ngFor="let column of columns; let i = index">
        <th>{{ column }}</th>
      </ng-container>
    </tr>
    </thead>
    <tbody>
      <tr *ngFor="let row of viewedGroups;let i = index" >
          <td>{{row.name}}</td>
          <td>{{row.items}}</td>

      </tr>
    </tbody>
  </table>

请检查

import { Component,ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
columns = ["name", "Items"];

  groups=[
     {
       "id": 1,
       "name": "pencils",
       "items": "red pencil"
     },
     {
       "id": 2,
       "name": "rubbers",
       "items": "big rubber"
     },
      {
      "id": 3,
       "name": "rubbers1",
       "items": "big rubber1"
     },
  ];
}

<input type="text" placeholder="search.." (input)="onChange($event.target.value)" >
<table class="table border">
    <thead>
    <tr>
      <ng-container *ngFor="let column of columns; let i = index">
        <th>{{ column }}</th>
      </ng-container>
    </tr>
    </thead>
    <tbody>
      <tr *ngFor="let row of viewedGroups;let i = index" >
          <td>{{row.name}}</td>
          <td>{{row.items}}</td>

      </tr>
    </tbody>
  </table>

viewedGroups = [];
...
ngOnInit(){
  this.viewedGroups = this.groups;
}

onChange(value){
   this.viewedGroups = this.groups.filter(a=>a.name.toLowerCase().search(value.toLowerCase())>-1 || a.items.toLowerCase().search(value.toLowerCase())>-1)
}