Угловая таблица пользовательских компонентов с переменными столбцами и элементами

Question

Я создал компонент, который отображает таблицу с несколькими столбцами с фильтрами ввода текста. Теперь я хочу повторно использовать эту таблицу в других компонентах. Например, для некоторого компонента могут потребоваться 3 столбца, для другого компонента может потребоваться фильтр DropDown вместо текстового фильтра. Можно ли это сделать? Каков наилучший способ повторного использования / структурирования кода в таком случае?

app.component.html:

<app-sample-table></app-sample-table>

sample-table.component.html:

<table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="name">
    <th class="header" mat-header-cell *matHeaderCellDef>
      Tenant Name
      <mat-form-field class="filter" floatLabel="never">
        <mat-label>Search</mat-label>
        <input matInput [formControl]="nameFilter">
      </mat-form-field>
    </th>
    <td mat-cell *matCellDef="let person">{{person.name}}</td>
  </ng-container>
  <ng-container matColumnDef="age">
    <th class="header" mat-header-cell *matHeaderCellDef>
      Age
      <mat-form-field class="filter" floatLabel="never">
        <mat-label>Search</mat-label>
        <input matInput [formControl]="ageFilter">
      </mat-form-field>
    </th>
    <td mat-cell *matCellDef="let person">{{person.age}}</td>
  </ng-container>
  <tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
  <tr mat-row
    *matRowDef="let person; columns: columnsToDisplay"></tr>
</table>

sample-table.component.ts:

import { Component, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { FormControl, FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-sample-table',
  templateUrl: './sample-table.component.html',
  styleUrls: ['./sample-table.component.scss']
})
export class SampleTableComponent implements OnInit {
  people = [
    {name: 'John', age: 50},
    {name: 'Ajay', age: 30}
  ];

  myForm: FormGroup;
  nameFilter = new FormControl('');
  ageFilter = new FormControl('');
  dataSource = new MatTableDataSource();

  columnsToDisplay = ['name', 'age'];
  filterValues;

  constructor(private formBuilder: FormBuilder) {
  }

  ngOnInit() {
    this.dataSource.data = this.people;
    this.dataSource.filterPredicate = this.tableFilter();

    this.filterValues = {name: '', age: ''};

    this.nameFilter.valueChanges
      .subscribe(
        name => {
          this.filterValues.name = name.trim().toLowerCase();
          this.dataSource.filter = JSON.stringify(this.filterValues);

        }
      )
    this.ageFilter.valueChanges
      .subscribe(
        age => {
          this.filterValues.age = age.trim().toLowerCase();
          this.dataSource.filter = JSON.stringify(this.filterValues);

        }
      )

    tableFilter(): (data: any, filter: string) => boolean {
      let filterFunction = function (data, filter): boolean {
        let searchTerms = JSON.parse(filter);
        return data.name.toLowerCase().indexOf(searchTerms.name) !== -1
          && data.age.toString().toLowerCase().indexOf(searchTerms.age) !== -1;
      }
      return filterFunction;
    }
}

Answer 1

Измените тег ввода фильтра текстового поля на тег ng-select. OnChange установить выбранное значение в качестве ключевой строки фильтра и вызвать функцию tableFilter

Надеюсь, это поможет !!