таблица материалов с функцией фильтра для каждого столбца - PullRequest
Новая
       31

таблица материалов с функцией фильтра для каждого столбца

0 голосов
/ 16 мая 2019

Я реализую общую таблицу с материалом.

проблема в том, как я могу создать метод фильтрации, который фильтрует только свой собственный столбец.

код выглядит так: 

<ng-container *ngIf="dataSource">
  <table
    mat-table
    [dataSource]="dataSource"
    class="mat-elevation-z8"
    class="generic-table"
  >
    <ng-container *ngFor="let colName of displayedColumns">
      <ng-container matColumnDef="{{ colName }}">
        <th mat-header-cell *matHeaderCellDef class="{{ headerClasses }}">
          <ng-container *ngIf="!isFilterAvailable">
            {{ colName }}
          </ng-container>
          <ng-container *ngIf="isFilterAvailable">
            <mat-form-field class="filter" floatLabel="never">
              <mat-label>Search</mat-label>
              <input matInput (keyup)="doFilter($event.target.value, colName)" />
            </mat-form-field>
          </ng-container>
        </th>
        <td
          mat-cell
          *matCellDef="let cellData"
          class="{{
            cellData[colName]
              | customPipeChecks: colName:cellData:customCssFunction
          }}"
          innerHtml="{{
            cellData[colName]
              | customPipeChecks: colName:cellData:customValueFunction
          }} "
        ></td>
      </ng-container>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    -->
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>
</ng-container>

и т. файл выглядит так: 

import { filter } from "rxjs/operators";
import { GenericTableData } from "@app/models/generic-table-data.model";
import { Component, Input, OnInit } from "@angular/core";
import * as _ from "underscore";
import { DataSource } from "@angular/cdk/table";
import { MatTableDataSource } from "@angular/material";
import { FormControl } from "@angular/forms";

@Component({
  selector: "app-generic-table",
  templateUrl: "./generic-table.component.html",
  styleUrls: ["./generic-table.component.scss"]
})
export class GenericTableComponent implements OnInit {
  @Input() isFilterAvailable: Boolean;
  @Input() tableData: GenericTableData;
  @Input() displayedColumns: string[];
  @Input() headerClasses = "";
  @Input() customValueFunction: (
    elemValue: string,
    elemKey: string,
    elem: {}
  ) => string;
  @Input() customCssFunction: (
    elemValue: string,
    elemKey: string,
    elem: {}
  ) => string;
  dataSource = new MatTableDataSource();
  filters = {};
  constructor() {}

  ngOnInit() {
    if (
      !this.displayedColumns &&
      this.tableData.rows.length > 0 &&
      !this.isFilterAvailable
    ) {
      this.displayedColumns = _.keys(_.first(this.tableData.rows));
    } else {
      this.dataSource.data = this.tableData.rows;
      this.initFilterValues(_.keys(_.first(this.tableData.rows)));
      this.dataSource.filterPredicate = this.createFilter();
    }
    this.dataSource.data = this.tableData.rows;
  }

  initFilterValues(values) {
    values.forEach(key => {
      this.filters[key] = "";
    });
  }

  doFilter(filterValue: string, column: string) {
    this.filters[column] = filterValue.trim().toLocaleLowerCase();
    this.dataSource.filter = JSON.stringify(filter);
    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

  createFilter(): (data: any, filter: string) => boolean {
    let filterFunction = function(data, filter): boolean {
      console.log("Function excuted");
      let searchTerms = JSON.parse(filter);

      data.forEach(function(key, value) {});
      return (
       true;
    };
    return filterFunction;
  }
}

У меня есть решение для фильтра для определенного столбца, но таблица не может запустить метод createFilter ().

Я отлажен. проблема в том, что функция createFilter будет запущена только один раз, если я что-то добавлю в фильтр, функция createFilter () не будет запущена.

если я что-то опрокидываю в поле ввода поиска и устанавливаю точку останова в функции funtion filterFunction, ничего не происходит.

онлайн Я нашел этот пример:

https://stackblitz.com/edit/angular-hbakxo-xctfqy?file=app%2Ftable-filtering-example.ts

в этом примере он также использовал тот же метод.

Может кто-нибудь показать мне, что я сделал ошибку.

С наилучшими пожеланиями,

Leo

...