单独的列过滤器而不影响在 Angular 4 或 5 中动态加载的现有 ngx 数据表功能

Question

您好，我是 Angular 的新手，直接在 Angular 4 和 5 上工作。我需要单独实现基于自定义列的 ngx 数据表过滤器。我尝试实现我的 ts,html 和 scss

grid.html

<ngx-datatable #datatableStats class="material ngx-datatable  datatable-header" [rows]='turbinesData|TurbineStatusFilter : filterType'
      [columns]='cols' [columnMode]="'force'" [headerHeight]="40" [footerHeight]="40" [rowHeight]="'40'" [limit]="10" [selected]="selected"
      [selectionType]="'checkbox'" (select)='onSelect($event)'>

    </ngx-datatable>

<ng-template #ColFilterTemp class="material ngx-datatable" ngx-datatable-header-template>
      <div display="flex" style="position:fixed;display:inline;overflow:visible;">
        <span>Turbine Status</span>
        <a href="#" data-toggle="dropdown"><i class="fa fa-filter filterStyle"></i>
        </a>
        <ul class="dropdown-menu pull-left" role="menu" style="overflow: visible;">
          <li id="trbnovfflw" *ngFor="let colFilter of colFilters" >
            <div *ngIf="isTrbStsSelected(colFilter.Name)" >
              {{colFilter.Name}}
            </div>
            <div *ngIf="!isTrbStsSelected(colFilter.Name)">
              {{colFilter.Name}}
            </div>
          </li>
        </ul>
      </div>
    </ng-template>

如果需要任何详细信息，请告诉我。

Answer 1

我不确定 ngx-dataTable 但你可以使用 "ng2-smart-table" 代替它，它具有单独的列过滤和排序选项

可以看到文档和demo here

Answer 2

接受的答案给人的印象是没有办法做到这一点。这是错误的。我刚刚与 angular 7.

一起完成了类似的任务

可以使用 Swimlane 的 ngx-datatable 使用其标准功能创建每列过滤。

文档比较散乱，不太方便，不过什么都有。

这是我得到的结果：

这是我使用的：link to the docs, link to the example

这是我的代码（为了简洁省略了一些部分）：

ts 文件

import { Component, TemplateRef, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';
import { Router } from '@angular/router';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { DatatableComponent } from '@swimlane/ngx-datatable';

import { StripCustomerName } from '../../pipes/strip-customer-name.pipe';
import { Observable, of, Subject } from 'rxjs';
import { catchError, map, tap, take, debounceTime } from 'rxjs/operators';
import { environment } from '../../../../../environments/environment';



@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.scss']
})
export class ListComponent implements OnInit, OnDestroy {

@ViewChild('actionsTemplate') actionsTemplate: TemplateRef<any>;
@ViewChild(DatatableComponent) table: DatatableComponent;
@ViewChild('hdrTpl') hdrTpl: TemplateRef<any>;


private filterSubject: Subject<string> = new Subject();

public columns: any[];
public rowsOrig: any[];
public rows = [];


public selcetedItem: any;
private subscription: any;

public filters = {};




  constructor(
    private http: HttpClient,
    private router: Router,
    private modalService: BsModalService
  ) {


...

  }


  ngOnInit() {

    this.filterSubject.pipe( debounceTime( 1000) ).subscribe( () => {
      this.filter();
    });


    this.columns = [
        { prop: 'status', name: 'Status', headerTemplate: this.hdrTpl, },
        { prop: 'phone_call_date', name: 'Phone Call Date', headerTemplate: this.hdrTpl,  },
        { prop: 'phone_number', name: 'Phone Number', headerTemplate: this.hdrTpl,  },
        { prop: 'customer_text', name: 'Customer', pipe: new StripCustomerName(), headerTemplate: this.hdrTpl, },
    ];

  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
    this.filterSubject.unsubscribe();
  }

  filterInput( $event ) {
    this.filterSubject.next( );
  }




    filter() {
      let temp = [...this.rowsOrig];

      Object.keys( this.filters ).forEach(key => {
...
      });


    this.rows = temp;
    this.table.offset = 0;
    }







}

html模板

<div class="col-auto ngx-datatable-wrapper">


    <ngx-datatable
        #table 
        class="material" 
        [rows]="rows" 
        [columns]="columns" 

        (activate)="onActivate($event)"  

        [columnMode]="'force'" 
        [headerHeight]="80" 
        [footerHeight]="50" 
        [rowHeight]="'auto'" 

        [limit]="10" 
      >


  </ngx-datatable>


  <ng-template #hdrTpl let-column="column" let-sort="sortFn">
    <span 
      class="header-sort-span" 
      (click)="sort()">
      {{column.name}}
    </span>
    <span class="header-filter-span">
      <input 
        [(ngModel)]="filters[column.prop]" 
        (input)="filterInput($event)"

        type="{{ column.prop=='phone_call_date' ? 'date' : 'text' }}" />
    </span>

  </ng-template>




</div>

单独的列过滤器而不影响在 Angular 4 或 5 中动态加载的现有 ngx 数据表功能

Individual Column filter without impacting existing ngx datatable features which are dynamically loading in Angular 4 or 5

ngx-datatable

angular