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

Question

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

我正在尝试使用管道和管道转换。但事实证明在这种情况下它没有用。请让我知道任何理想的方式来进行此操作

预期结果：

Answer 1

您可以为每个字段创建一个属性，例如：selectedDeliveryMethod、selectedAssesments、selectedAvailibity 等...然后使用两种方式绑定在下拉功能中设置selected* 属性。要显示它，您只能在未定义值时显示它（undefined），当您单击关闭图标时，您将值设置为undefined，因此它将消失。

例子：

组件

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

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

HTML

<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>

有一个 stackblitz 向您展示它是如何工作的：https://stackblitz.com/edit/angular-eytqnx

另一种选择是将任何下拉列表的选择项添加到 Array 中，然后使用带有自定义模板（文本 + 关闭图标）的 *ngFor 指令显示它

希望对你有帮助。