Как скрыть выбранный текст опции в поле выбора, Angular 4

Question

У меня есть этот раскрывающийся список этнической принадлежности. То, что я хочу, это когда я выбираю четкую этническую принадлежность, она не должна появляться в поле выбора, и поле «Мне нравится» должно быть пустым. Как я могу это сделать?

  <select
        #ethnicity
        [(ngModel)]="patient.Ethnicity"
        [class.text-dimmed]="!patient.Ethnicity"
        name="ethnicity"
        id="ethnicity"
        class="form-control input-underline input-lg ml-0">
          <option [ngValue]="null" disabled> Select </option>
          <option [ngValue]="null">Clear ethnicity</option>
          <option  value="Alaska-Native">Alaska Native</option>
          <option value="American-Indian">American-Indian</option>
          <option value="Asian">Asian</option>
          <option value="African-Americans">Black or African American</option>
          <option value="Hispanic">Hispanic or Latino</option>
          <option value="Jewish-Ashkenazi">Jewish - Ashkenazi</option>
          <option value="Jewish-Other">Jewish - Other</option>
          <option value="Native-Hawaiians">Native Hawaiian or Other Pacific Islander </option>
          <option value="Other">Other </option>
          <option value="Unknown">Unknown </option>
          <option value="White-Caucasian">White or Caucasian</option>
      </select>

например, когда я выбираю его, оно выглядит так

но я хочу,

вот мое демо чистая этническая принадлежность должна отображаться в раскрывающемся списке, но когда я выбираю ее, она не должна отображаться в поле выбора, как я делил снимки экрана

Что я должен сделать, чтобы решить эту ситуацию? Спасибо.

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>