从angular 8中的下拉列表（动态创建）中删除/禁用选定选项

我有一个带有一些字段的动态下拉列表。

• 按+按钮将生成一个新行。我们可以在这里有任意数量的行
• 我需要从这里删除/禁用以前选择的下拉列表值

我已经像这样存储了选定的项目和我的整个列表

SelectedFieldList =["ProductCode","Name"];
FieldList=["ProductCode","Name","Code","Image","Category", etc..]

我已尝试使用此代码禁用所选选项

 <select formControlName="FieldName">
                        <ng-container *ngFor="let FieldItem of FieldList">
                          <option *ngIf="!SelectedFieldList.includes(FieldItem)"  [value]="FieldItem">{{FieldItem}}</option>
                          <option [disabled]="true" *ngIf="SelectedFieldList.includes(FieldItem)"  [value]="FieldItem">{{FieldItem}}</option>
                        </ng-container>
                      </select>

{{FieldItem}}
{{FieldItem}}

这在下拉列表中运行良好。但问题是在“下一步”按钮单击中禁用以前选择的项目之后。这将更改已选择的下拉列表值。意味着它也将从已选择的下拉列表中禁用，并显示下一个相关值

在上面的屏幕截图中，我选择了“产品编号”。但单击+按钮后，它从下一个下拉菜单中成功禁用。但它在第一个下拉列表中将值更改为“Product code”（产品编号也在其中，但它是禁用的格式）。

任何解决方案都将不胜感激。

---

提前感谢

为什么不将条件绑定到禁用的输入

 <ng-container *ngFor="let FieldItem of FieldList">
    <option [disabled]="SelectedFieldList.includes(FieldItem)"  [value]="FieldItem">{{FieldItem}}</option>
 </ng-container>

{{FieldItem}}

@Ajas Aju此解决方案对您有效吗？我有相同的要求，但这不起作用。Hi@Pinka，我在下拉更改事件中为所有选定的项目维护了一个数组，并在选择选项上写了一个条件

{{FieldItem}}{{FieldItem}

请与我前面的示例进行比较。如果

selectedskuenestfieldlist

数组中的

FieldItem

，我将禁用并更改颜色。否则它将正常列出所有字段。