如何在Angular 4的选择框中隐藏所选的选项文本

Question

我有这个种族下拉列表。 我想要的是，当我选择清晰的种族时，它不应出现在选择框中，而类似框应为空。 我该怎么办？

['app', 'main']

就像我选择它一样，它看起来像这样

但是我想要的是

这是我的demo 清晰的种族应该显示在下拉列表中，但是当我选择它时，它应该不会像我共享的屏幕截图那样显示在选择框中

我应该怎么做才能解决这种情况？ 谢谢。

Answer 1

您可以像这样处理选择标签的change event。

onChange(value) {
    if(value == 'Clear ethnicity'){
      this.Ethnicity = '';
}

<select
            #ethnicity
            [(ngModel)]="Ethnicity"
            [class.text-dimmed]="!Ethnicity"
            name="ethnicity" (change)="onChange($event.target.value)"
            id="ethnicity"
            class="form-control input-underline input-lg ml-0">

演示：https://stackblitz.com/edit/angular-clear-option-select

Answer 2

您所要做的就是像我在下面所做的那样删除“清除种族”值：

<option [ngValue]="null" [hidden]="clear.selected"></option>