可重復使用的 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>