Динамический фильтр таблицы матов, переменная дочернего компонента инициализируется числом столбцов вместо одного
У меня есть таблица соответствия, где я пытаюсь применить динамический фильтр, где таблица соответствия находится в родительском компоненте, а раскрывающийся список фильтра находится в дочернем компоненте (app-filter-template).
<ng-container matColumnDef="Name">
<th mat-header-cell *matHeaderCellDef (click)='onFilterClick("Name")'> Name
<app-filter-template [filterheader]="column"></app-filter-template>
</th>
<td mat-cell *matCellDef="let element"> {{element[Name]}} </td>
</ng-container>
<ng-container matColumnDef="LName"> ... </ng-container>
//8 more columns...
Parent.ts
onFilterClick(filter) {
this.column = filter;
}
Таким образом, при каждом щелчке th значение столбца изменяется, в результате устанавливается свойство filterheader дочернего app-filter-template.
FilterTemplateComponent.ts
@Input() set filterheader(column: string) {
console.log(column);
}
Проблема в том, что таблица матов имеет 10 столбцов, даже если щелкнуть первый столбец, заголовок фильтра вызывается 10 раз (как число в столбце).
Как ограничить значение, которое будет установлено только один раз, я пробовал тему поведения, но опять же проблема?