如何将不同的数据集与Angular 7中的多个组件关联？

我在Angular 7中创建了一个自定义下拉组件，它将数组作为输入。目前，它用于显示国家列表。如果此下拉组件仅在父组件中出现一次，则此操作非常有效。但是现在我需要在同一父组件中使用下拉组件两次——一次显示国家列表，另一次显示国家。即使我传入不同的数据集，它也只显示父组件中出现的第一个数据集。我的问题是，如何将每个下拉列表与特定的数据集相关联

下拉组件：

<input type="text" class="form-control" [(ngModel)]="selectedItem">
<div class="itemsContainer">
    <ul class="list">
        <li *ngFor="let item of listToFilter; let i = index;" class="item" id="{{'item-'+i}}">  
        {{item.value}} - {{item.description}}</li>
    </ul>
</div>

<app-custom-dropdown [listToFilter]="countries" (itemSelected)="getSelectedCountry($event)"></app-custom-dropdown>

{{item.value}}-{{item.description}

父组件：

<input type="text" class="form-control" [(ngModel)]="selectedItem">
<div class="itemsContainer">
    <ul class="list">
        <li *ngFor="let item of listToFilter; let i = index;" class="item" id="{{'item-'+i}}">  
        {{item.value}} - {{item.description}}</li>
    </ul>
</div>

<app-custom-dropdown [listToFilter]="countries" (itemSelected)="getSelectedCountry($event)"></app-custom-dropdown>

请尝试为两者分配不同的Id，并且此链接可能会帮助您工作。这就是使用可重复使用的组件。对于seocnd下拉列表，请使用[listToFilter]=“states”，其中states是不同的变量。@EnigmaState我用不同的ID尝试过，但仍然不适用于我。我来看看这个链接。我确实将新数据集与[listToFilter]相关联，但它不起作用。因此，我的问题是，请您尝试为两者分配不同的Id，并且此链接可能会帮助您工作。这就是使用可重复使用的组件。对于seocnd下拉列表，请使用[listToFilter]=“states”，其中states是不同的变量。@EnigmaState我用不同的ID尝试过，但仍然不适用于我。我来看看这个链接。我确实将新数据集与[listToFilter]相关联，但它不起作用。因此我的问题是