Столбцы фильтра таблицы данных Angular2

Question

Как я могу отфильтровать весь столбец (заголовок и данные) с таблицей данных Angular2?

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

https://stackblitz.com/edit/data-table-filter-columns

EDIT:

Это на самом деле очень легко и упущено мной. Решением было просто добавить мою функцию фильтрации в matHeaderRowDef, а также в matRowDef. Я обновил свой стек, так что теперь он работает так, как я намеревался

Answer 1

В качестве решения я приведу лишь один пример, потому что это не сложно, и вы можете найти решение в документах . Просто перенеси эту ситуацию на свою.

Попробуйте подход, подобный документам, поэтому отделите отображаемые данные для столбцов, строк и общих данных для таблицы.

const ELEMENT_DATA: PeriodicElement[] = [
    {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
    {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
];
data: PeriodicElement[] = ELEMENT_DATA;

displayedColumns: string[] = ['name', 'weight', 'symbol', 'position'];

columnsToDisplay: string[] = this.displayedColumns.slice(); //returns a copy of displayedColumns

Теперь вы можете использовать их в своем HTML-файле, как показано ниже:

<table mat-table [dataSource]="data">
    <ng-container [matColumnDef]="column" *ngFor="let column of displayedColumns">
        <th mat-header-cell *matHeaderCellDef> {{column}} </th>
        <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
    </ng-container>

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

В качестве примера вашего решения я добавлю в html-файл кнопку, которая инициирует удаление последнего столбца: (аналогично сортировке в некотором роде)

<button mat-raised-button (click)="removeColumn()"> Remove column </button>

Теперь нам просто нужно удалить последний элемент массива displayedColumns, чтобы удалить последний столбец нашей таблицы.

removeColumn() {
    this.columnsToDisplay.pop(); //removes the last element of the array
}