Question

我想知道如何使用角形材料将过滤器添加到表中，我希望过滤器过滤所有列和行，感谢您的帮助，谢谢，美好的一天：D

  <table class="table table-hover">

  <thead>
    <tr>
      <th scope="col">Rut</th>
      <th scope="col">Nombre Paciente</th>
      <th scope="col">Apellido Paciente</th>
      <th scope="col">Teléfono</th>
        <th scope="col">Dirección</th>
      <th scope="col">Acciones</th>

    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let pacientes of pacientes">
     <td>{{pacientes.rutPac}}</td> 
     <td>{{pacientes.nombrePac}}</td> 
       <td>{{pacientes.apellidoPac}}</td> 
     <td>{{pacientes.telefonoPac}}</td> 
     <td>{{pacientes.direccionPac}}</td> 
     <td>
   <button class="btn btn-secondary" type="button" href="#updatePaciente" data-toggle="modal"  (click)="examenClicked(pacientes)">Editar</button>  
   <button class="btn btn-danger" (click)="delete(pacientes)">Borrar</button>
     </td>    
    </tr>
  </tbody>
</table>

Answer 1

如果您使用的是材料表，则需要提供我们自己的输入字段和一个自定义函数，以使用here所述的MatTableDataSource的filter属性来过滤数据。

示例

<div fxLayout fxLayoutAlign="center center">
  <mat-form-field fxFlex="40%">
    <input matInput type="text" (keyup)="filterTable($event.target.value)" placeholder="Filter">
  </mat-form-field>
</div>

在component文件中写入以下功能：

public filterTable = (value: string) => {
    this.dataSource.filter = value.trim().toLocaleLowerCase();
  }

使用角度材料表过滤

1 个答案: