可重复使用的 angular 组件具有与前一个相同的数据 - 输入数据列表

Question

我正在尝试制作一个简单的可重用组件 - 一个带有显示为下拉列表的数据列表的输入框。 一切都很好，除非我尝试重用此组件，然后所有列表都包含与网页上第一个组件相同的数据。 该组件称为“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>

Typescript

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.log 进行了验证。

我不明白为什么会发生这种情况，如何确保列表加载了我提供的正确值？ 我是否必须为每个组件分隔“输入标签”的“列表”参数而不是硬编码为“dl1”？

Answer 1

我发现了问题，它确实是“列表”参数，它需要是动态的，否则它会一直指向由于硬编码值“dl1”而创建的第一个列表。 下面是我如何修复它的代码（组件 HTML）...

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