根据下拉选择值显示过滤器

Question

Am使用angular6反应形式。它的形式有3个下拉列表。每当下拉菜单中的值发生变化时，我都需要在带有“关闭”图标的“已应用过滤器”列中显示这些选定的值。 因此，如果单击关闭图标，则过滤器应隐藏，并且相应的下拉菜单应重置。

我正在尝试使用pipe和pipetransform。但这在这种情况下没有用。请让我知道进行此操作的理想方法

预期结果：

Answer 1

您可以为每个字段创建一个属性，例如：selectedDeliveryMethod，selectedAssesments，selectedAvailibity等，然后使用两种方式绑定来设置{{1} }属性的下拉菜单。要显示它，您只能在未定义值（selected*）时显示它，并且当您单击关闭图标时，将值设置为undefined，这样它将消失。

示例：

组件

undefined

HTML

@Component({ ... })
export class AppComponent {
  public selectedItem: any;
  public itemArray: any = [
    "USA",
    "Canada",
    "France",
  ];

  public removeSelectedItem(): void {
    this.selectedItem = undefined;
  }
}

这里有个堆栈闪电战，向您展示它是如何工作的：https://stackblitz.com/edit/angular-eytqnx

另一种选择是将任何下拉菜单的选择项添加到<select [(ngModel)]="selectedItem"> <option *ngFor="let item of itemArray">{{ item }}</option> </select> Selected filter: <span *ngIf="selectedItem != undefined"> {{ selectedItem }} <button (click)="removeSelectedItem()">Remove selected item</button> </span> 中，然后使用带有自定义模板（文本+关闭图标）的Array指令显示它

希望有帮助。