有没有办法以“角度方式”为每列使用带有过滤器的角度数据表？答案

【问题标题】：Is there a way to use the Angular Datatables with a filter for each column the "angular way"?有没有办法以“角度方式”为每列使用带有过滤器的角度数据表？
【发布时间】：2020-01-02 01:32:37
【问题描述】：

我正在使用 Angular 7 和 Angular DataTables，“角度方式”。我想为每一列设置一个过滤器，例如“单独的列搜索”-> https://l-lin.github.io/angular-datatables/#/advanced/individual-column-filtering，在那里显示“不是角度方式”。

我尝试将“角度方式”（https://l-lin.github.io/angular-datatables/#/basic/angular-way）与“其他方式”结合起来，但过滤器不起作用。只有右上角的全局过滤器在工作。似乎没有对过滤器的列的引用。

export class AppComponent implements OnInit, AfterViewInit, OnDestroy {
  @ViewChild(DataTableDirective)
  datatableElement: DataTableDirective;
  dtOptions: DataTables.Settings = {};

  users: User[] = [];
  dtTrigger: Subject<User> = new Subject();

  constructor(private http: HttpClient) {}
  ngOnInit(): void {
    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength: 2
    };
    this.http.get<User[]>('https://l-lin.github.io/angular-datatables/data/data.json')
      .subscribe(users => {
        this.users = users;
        this.dtTrigger.next();
      });
  }

  ngAfterViewInit(): void {
    this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
      dtInstance.columns().every(function () {
        const that = this;
        $('input', this.footer()).on('keyup change', function () {
          if (that.search() !== this['value']) {
            that
              .search(this['value'])
              .draw();
          }
        });
      });
    });
  }

<table datatable="ng" [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
  <tfoot>
  <tr>
    <th><input type="text" placeholder="Search ID" name="search-id"/></th>
    <th><input type="text" placeholder="Search first name" name="search-first-name"/></th>
    <th><input type="text" placeholder="Search last name" name="search-last-name"/></th>
  </tr>
  </tfoot>
  <thead>
  <tr>
    <th>ID</th>
    <th>First name</th>
    <th>Last name</th>
  </tr>
  </thead>
  <tbody>
  <tr *ngFor="let user of users.data">
    <td>{{ user.id }}</td>
    <td>{{ user.firstName }}</td>
    <td>{{ user.lastName }}</td>
  </tr>
  </tbody>
</table>

我希望过滤器会像全局过滤器一样工作，但它们不会做出反应。

我不相信我是第一个想尝试这个的人。但不幸的是我找不到任何解决方案。我找到了

【问题讨论】：

标签： angular filter datatable filtering angular7

【解决方案1】：

今天我在Angular Datatables示例的官方文档中遇到错误个别列搜索，如果其他人需要它，我会回答。

可以查看官方文档DataTables

需要加id标识datatable要查找的列号

<tfoot>
      <tr>
       <th><input type="text" id="0" placeholder="Search ID" name="search-id"/></th>
       <th><input type="text" placeholder="Search name" id="1" name="search-first-name"/></th>
       <th><input type="text" placeholder="Search last name" id="2" name="search-last-name"/></th>
  </tr>
</tfoot>

在 ts 作为奖励并添加了一个去抖动功能以防止多个后端调用，就像我的情况一样，我有服务器端处于活动状态。

信用Quetion stackoverflow

globalTimeout = null;

....

  ngAfterViewInit(): void {
    this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
      dtInstance.columns().every(function () {


          const that = this;
          $('input', this.footer()).on('keyup change', function () {

            if (that.globalTimeout != null) {
              clearTimeout(that.globalTimeout);
            }
            that.globalTimeout = setTimeout(() => {
              that.globalTimeout = null;
              if (that.column(this['id']).search() !== this['value']) {
                that
                  .column(this['id'])
                  .search(this['value'])
                  .draw();
              }
            }, 2700);
          });

      });
    });
  }

【讨论】：

我已经添加了代码，但是给出了错误属性 'column' does not exist on type 'ColumnMethods'
如果你愿意，你可以在 stackblitz 或存储库中复制，我会帮你@SomnathRokade
谢谢@CViloria 我已经解决了这个问题

【解决方案2】：

我遇到了同样的错误“列方法”类型中不存在属性“列”，这就是我解决它的方法：

this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
    dtInstance.columns().every(function () {
      $('input', this.footer()).on('keyup change', function () {
        if (dtInstance.column(this['id']).search() !== this['value']) {
          dtInstance
            .column(this['id'])
            .search(this['value'])
            .draw();
        }
      });
    });
  });

【讨论】：