Angular 8 ngFor table td 无法在数据表中排序或搜索答案

【问题标题】：Angular 8 ngFor table td unable to sort or search in datatablesAngular 8 ngFor table td 无法在数据表中排序或搜索
【发布时间】：2020-08-10 04:02:08
【问题描述】：

我正在使用 Datatables 来显示表格中的数据。如果我使用普通的 TR 和 TD 效果很好。如果我在 FOR 循环中添加相同的内容，它将不起作用。下面是我的代码

<tr *ngFor="let info of lspOverAllInfoArray" role="row">
                          <td>{{ info[1] }}</td>
                          <td>{{ info[2] }}</td>
                          <td>{{ info[3] }}</td>
                        </tr>
                        <tr>
                          <td>2</td>
                          <td>Someone</td>
                          <td>Youknow</td>
                        </tr>
                        <tr>
                          <td>3</td>
                          <td>Iamout</td>
                          <td>Ofinspiration</td>
                        </tr>

如果我尝试排序或搜索后仅显示最后 2 条记录（静态记录）。所有动态添加的数据都会消失。

【问题讨论】：

请分享与您的搜索方法相关的代码。
任何 stackblitz 工作示例都有助于解决问题

标签： angular datatables angular8

【解决方案1】：

创建自定义管道

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'customerEmailFilter'
})
export class SearchPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    if (!args) {
      return value;
    }
    return value.filter((val) => {
      let rVal = (val.id.toLocaleLowerCase().includes(args)) || 
      (val.name.toLocaleLowerCase().includes(args)) ||
      (val.email.toLocaleLowerCase().includes(args));
      return rVal;
    })

  }

}

在你的 HTML 中使用这个管道

<table border="1" width="100%">
  <tr>
    <th>No.</th>
    <th>Id</th>
    <th>Email</th>
    
    <th>Name</th>
  </tr>
  <tr *ngFor="let customer of users | customerEmailFilter:email;let i = index">
    <th scope="row">{{i+1}}</th>
    <td>{{customer.id}}</td>
    <td>{{customer.email}}</td>
    <td>{{customer.name}}</td>
  </tr>

</table>

Check this sample

【讨论】：