如何过滤垫扩展面板中的表格？按列答案

【问题标题】：How to filter table in mat-expansion-panel? by column如何过滤垫扩展面板中的表格？按列
【发布时间】：2020-08-28 08:18:54
【问题描述】：

我正在使用 mat-expansion-panel 和 mat-accordion 来创建一个带有折叠/展开事件的表格：

这是我的相关代码：

<mat-accordion [multi]="true" displayMode="flat" class="mat-table font-size">
  <section class="mat-header-row">
    <div class="mat-header-cell client">**<input type="text" placeholder="Client">**</div>
    <div class="mat-header-cell siren">**<input type="text" placeholder="N° SIREN">**
    </div>
    <div class="mat-header-cell code">Code</div>
    <div class="mat-header-cell id">ID</div>
    <div class="mat-header-cell usage">Usages</div>
  </section>
  <mat-expansion-panel *ngFor="let client of offerClients; let index = index;">
    <mat-expansion-panel-header [ngClass]="{'ligne-pair': index%2 == 0,'ligne-impair': index%2 != 0}">
      <img src="assets/Arrow_down.png">
      <div class="client">{{client.shortName}}</div>
      <div class="siren">{{client.siren}}</div>
      <div class="code">{{client.code}}</div>
    </mat-expansion-panel-header>
    <div>
      <table>
        <tr *ngFor="let usage of client.usage">
          <td class="client"></td>
          <td class="siren"></td>
          <td class="code"></td>
          <td class="id">{{usage.id}}</td>
          <td class="usage">{{usage.usageName}}</td>
        </tr>
      </table>
    </div>
  </mat-expansion-panel>
</mat-accordion>

我知道 mat-expansion-panel 组件中没有原生集成过滤器选项但我需要根据过滤器输入对每一列进行过滤：<input type="text" placeholder="Client">

请问您知道实现它的任何简单方法吗？

【问题讨论】：

您需要根据输入值过滤使用数组
你好 @DerekKite 我需要在 mat-expansion-panel 中过滤客户端数组

标签： angular filter angular-material angular8

【解决方案1】：

您需要过滤推送到表中呈现的数据，其中一种方法是：

        <tr *ngFor="let usage of filter(client.usage)">
          <td class="client"></td>
          <td class="siren"></td>
          <td class="code"></td>
          <td class="id">{{usage.id}}</td>
          <td class="usage">{{usage.usageName}}</td>
        </tr>

filter 函数是这样的：

filter(list) {
  return list.filter(({ col1, col2, ... }) => !this.filter.col1 || col1 === this.filter.col1 && !this.filter.col2 || col2 === this.filter.col2);
}

【讨论】：