对我的表角度实现简单的过滤器

Question

我如何使用我的数据和服务对我的表进行过滤，我的想法是将过滤器应用于下表中的所有列。请帮助人们，这是我使用Django和Angular的第一个proyect像前面一样

组件.ts

  closeResult: string;
  categorias: Categoria[];
  selectedCategory;
  dataSource = new MatTableDataSource(this.categorias);
  constructor(private dataService: dataService, private router: Router, public dialog: MatDialog) {
    this.getCategorias();
    this.selectedCategory = {
      id: -1, nombreCat: '', detalleCat: '', release_date: ''
    };
  }

  getCategorias(): void {
    this.dataService
      .getCategorias()
      .then(categorias => this.categorias = categorias);
  }

  ngOnInit() {
    this.getCategorias();
  }

组件.html

 <table  class="table table-hover" >
      <thead>
        <tr>
          <th scope="col">Código</th>
          <th scope="col">Nombre</th>
          <th scope="col">Fecha De Creación</th>
          <th scope="col">Detalle</th>
          <th scope="col">&nbsp;</th>
          <th scope="col">&nbsp;</th>
          <th scope="col">Acción</th>     
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let categorias of categorias">
         <td>{{categorias.id}}</td> 
         <td>{{categorias.nombreCat}}</td>
         <td>{{categorias.release_date}}</td>  
         <td>{{categorias.detalleCat}}</td> 
         <td>&nbsp;</td>  
         <td>&nbsp;</td>  
        <td >
      <button class="btn btn-secondary" type="button" href="#signinModal" data-toggle="modal"  
      (click)="examenClicked(categorias)">Editar</button>  
       <button class="btn btn-danger" mwlConfirmationPopover [popoverTitle]="popoverTitle"
        [popoverMessage]="popoverMessage"
        placement="left" (confirm)="delete(categorias)" (cancel)="cancelClicked = true" > Borrar  </button>
        </td>    
          </tr>
      </tbody>
    </table>

服务

    getCategorias(): Promise<Categoria[]> {
        return this.http.get(this.baseurl + '/categoria?format=json', { headers: this.headers })
            .toPromise()
            .then(response => response.json() as Categoria[])
    }