从下拉角度中删除选定的值

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 部分的第二部分，我尝试在 DropDownBox 中使用 ngIf 删除重复的值，这就是我现在得到的（在这种情况下，1 是数据库中的默认值以及其他值）：

这实际上隐藏了重复的值，因为您可以在 1 和 2 之间有一个空格，其中包含一个空白值（这实际上是重复的值 1），我试图摆脱它。我正在考虑以下方法来摆脱在 DropDownBox 中重复的选定值：

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

numbers 是我放置 DropDownBox 值的任何位置的变量类型，但我不确定如何在加载 Angular 时传递所选值。有什么合适的方法吗？

注意：这是一个获取数字的虚拟方法

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 创建一个双向数据绑定的意思是如果 value.number 更新这将反映到选择元素，如果你更新 通过选择不同的选项选择元素将更新 value.number 到那个值

更新选项

任何时候numbers 参考更新都会反映到 选项，因此您无需使用 ngIf 添加额外的登录信息，只需更新 numbers 数组和角度将更新其选项基础。

stackblitz demo ??