Как сгенерировать элементы фильтра с определениями столбцов таблицы w.r.t для всех таблиц на сайте - Angular

Question

Я устанавливаю новый всплывающий компонент фильтра таблиц, который должен быть общим и использоваться для всех таблиц на моем веб-сайте. Я сделал это динамически и удалил (не устраивает). Потому что простота использования немного сложнее. Как создать этот компонент, чтобы его можно было легко настраивать и использовать в приложении (легко настраивать). Я прилагаю требование в изображениях. пожалуйста, проверьте один раз.

У меня вопрос: компонент x имеет разные столбцы таблицы типов данных по сравнению с столбцами таблицы компонентов y. Затем, как написать общий код, чтобы сделать компоненты фильтра такими, как текстовые поля, радио-кнопки, флажки, элементы диапазона дат и критерии поиска как (содержит, равно, начинается с). Как написать?

Answer 1

Вам необходимо создать компонент фильтра как разделяемый / повторно используемый компонент

@Component({
 selector: 'app-filter',
 templateUrl: './filter.component.html',
 styleUrls: ['./filter.component.scss']
})
export class FilterComponent {

  @Input() filterOptions: any[];

  @Output() selectedFilteredOptions = new EventEmitter();

}

В шаблоне xComponent

<app-filter 
   (selectedFilteredOptions)="onApplyFilters()"                                
   [filterOptions]="xOptionsList">
 </app-filter>

Шаблон компонента Y Y

 <app-filter 
   (selectedFilteredOptions)="onApplyFilters()"                                
   [filterOptions]="yOptionsList">
 </app-filter>

Answer 2

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