Многоразовый угловой компонент имеет те же данные, что и предыдущий - входной список данных

Я пытаюсь создать простой повторно используемый компонент - поле ввода со списком данных, которое отображается в виде раскрывающегося списка. Все в порядке, за исключением того, что когда я пытаюсь повторно использовать этот компонент, все списки содержат данные, такие же, как и первый компонент на веб-странице. Компонент называется app-reuable-filter, и вот как он вызывается:

    <app-reuable-filter 
        [params] = "{filterName: 'tktNum', filterLabel: 'Ticket Number...'}"
        (filterChosen) = "onFilterChosen($event, 'tktNum')"
    ></app-reuable-filter>
    <app-reuable-filter 
        [params] = "{filterName: 'assigned', filterLabel: 'Assigned To...'}"
        (filterChosen) = "onFilterChosen($event, 'assigned')"
    ></app-reuable-filter>

Компонент HTML

<div class = "col">
    <input 
        type = "text" class = "form-control" list = "dl1" (click) = "clearFilter()" (change) = "fireEvent()"
        [placeholder] = "params.filterLabel" [(ngModel)] = "chosenValue"
    >
    <datalist id = "dl1"> 
        <option *ngFor = "let _ of listOfVals">{{ _.valueField }}</option>
    </datalist>
</div>

Машинопись

import { Component, EventEmitter, OnInit, Output, Input } from '@angular/core';

@Component({
  selector: 'app-reuable-filter',
  templateUrl: './reuable-filter.component.html',
  styleUrls: ['./reuable-filter.component.css']
})
export class ReuableFilterComponent implements OnInit {
  listOfVals: {}[] = [];
  chosenValue: string;
  @Input() params: any;
  @Output('filterChosen') filterClicked = new EventEmitter<string>();
  
  constructor() { }

  ngOnInit(): void {
    this.fetchFilters();
  }

  fetchFilters(): void {
    if (this.params.filterName === "assigned") this.listOfVals.push({ valueField : 'a1'});
    else this.listOfVals.push({ valueField : 'b1'});
  }

  clearFilter(): void {
    this.chosenValue = '';
    this.fireEvent();
  }

  fireEvent(): void {
    this.filterClicked.emit(this.chosenValue);
  }
}

После этого я ожидаю увидеть два входа с раскрывающимися списками с заполнителями в них как «Номер билета ...» и «Назначено ...» соответственно. И это то, как это показано, но я также ожидаю увидеть «b1» и «a1» как отдельные элементы в раскрывающихся списках соответственно. Чего я не знаю; оба списка содержат "b1" в качестве единственного элемента, который можно выбрать.

Если я попытаюсь повторно использовать этот компонент еще раз, то независимо от того, что я укажу в методе «fetchFilters()», я все равно увижу «b1» как единственный элемент, который можно выбрать в этом новом компоненте. Я знаю, что значения, передаваемые в «params», достигают метода «fetchFilters()», я проверил с помощью console.info.

Я не понимаю, почему это происходит и как мне убедиться, что списки загружаются с правильными значениями, которые я предоставляю? Должен ли я отделять параметр «список» от «входного тега» для каждого компонента вместо жесткого кодирования как «dl1»?