是否有一种方法可以对每列使用Angular Datatables和一个过滤器，即“ Angular Way”？

Question

我正在使用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>

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

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

Answer 1

今天我在Angular Datatables示例的官方文档中出现了错误

单个列搜索，如果有人需要它，我会回答。

您可以查看官方文档DataTables

必须添加标识以标识要由数据表搜索的列号

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

作为奖励，并添加了防反射功能，以防止出现多个后端调用，就像我在我的服务器端处于活动状态一样。
信用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);
          });

      });
    });
  }