angular - 从 Angular 8 的下拉列表中删除/禁用选定的选项(动态创建的)

Question

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

按 + 按钮将生成一个新行。我们可以在这里有任意数量的行。

我需要从这里删除/禁用先前选择的下拉值

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

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>

这在下拉列表中运行良好。但问题是在下一个按钮单击中禁用先前选择的项目之后。这正在更改已选择的下拉值。意味着它还从已选择的下拉列表中禁用并显示下一个相关值。
在上面的屏幕截图中，我选择了“产品编号”。但是单击 + 按钮后，它已成功从下一个下拉列表中禁用。但它在第一个下拉列表中将值更改为“产品代码”(产品编号也在那里，但它是一种禁用的格式)。

任何解决方案将不胜感激。
提前致谢

Answer 1

为什么不将条件绑定(bind)到禁用输入？

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