Удалить выбранное значение из раскрывающегося угла

Question

Я пытаюсь редактировать данные, используя Angular, и все работает нормально. Вот что я сделал, когда редактировал данные, выбранное значение в DropDownBox исходит из базы данных. Это тоже работает отлично. Но проблема, с которой я сталкиваюсь, заключается в том, что другие элементы или значения DropDownBox должны возникать при выборе значения по умолчанию при редактировании. Итак, во внешнем интерфейсе у меня есть что-то вроде этого:

<div class="form-group">
   <label for="number">Number</label>      
    <select class="form-control">
      //Getting selected values here from database
      <option name="Number" [(ngModel)]="value.number" value={{value.number}}>
        {{value.number}}
      </option>

      //Rest of the DropDownBox elements are filled here 
      <option *ngFor="let number of numbers" value={{number.id}}>
        <ng-container *ngIf="number.id != value.number">
          {{number.id}}
        </ng-container>
      </option>
    </select>
</div> 

Во втором разделе раздела HTML я попытался удалить повторяющееся значение, используя ngIf в DropDownBox, и это то, что я получил сейчас (в данном случае 1 - это значение по умолчанию из базы данных вместе с другими значениями):

Это на самом деле скрывает повторяющиеся значения, так как вы можете найти пробел между 1 и 2, содержащий пустое значение (и это фактически значение 1, которое повторяется), от которого я пытаюсь избавиться. Я думал о следующем, чтобы избавиться от выбранных значений, которые повторяются в DropDownBox:

this.numbers = this.getNumber().filter(item => item.id != id);

числа - это тип переменной, в которую я помещаю значения DropDownBox, но я не уверен, как передать выбранное значение при загрузке Angular. Есть ли правильный способ сделать это?

N.B: Вот фиктивный метод для получения чисел

getNumber() {
    return [
      new Number(1),
      new Number(2)
   ];
}

Answer 1

вам не нужно использовать два разных тега параметра, просто изучите этот код

<option *ngFor="let d of cities" value="{{ d.id }}" [selected]="d?.id === cityId">{{
              d?.city_name
            }}</option>

в этом коде в выбранном свойстве d? .Id - это код из API, а cityId - то, что я также получилAPI, но выбранный пользователем, но на другой странице.

надеюсь, вы получите ответ.

Answer 2

это может быть правильным, сначала связать ngModel на элементе выбора, а не опции

<div class="form-group">
   <label for="number">Number</label>      
    <select class="form-control"  [(ngModel)]="value.number">
      <option *ngFor="let number of numbers" [value]="number">
          {{number}}
      </option>
    </select>
</div> 

ngModel создать двустороннюю привязку данных, если значение valuenumber обновить этобудет отображаться в элементе выбора, и если вы обновите элемент выбора, выбрав другой вариант, обновите значение value.number до этого значения

обновите параметры

в любое время *Справочное обновление 1012 * Это будет отражать опции, поэтому вам не нужно добавлять дополнительный логин с помощью ngIf , просто обновите массив numbers, а angular обновит базу опций этого.

демонстрация stackblitz ??