从下拉角删除选定的值

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

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

NB：这是一种获取数字的伪方法

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

这可能是正确的，首先将select元素上的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是平均值   更新，这将反映到选择元素，如果您更新   通过选择其他选项选择元素将更新值。   达到那个值

更新选项

  

无论何时numbers参考更新都会反映到   选项，因此您无需使用 ngIf 添加额外的登录信息   numbers数组和angular将更新其选项库。

stackblitz demo ??