如何从下拉列表中删除先前选择的选项但在编辑模式下显示？

Question

我在 Angular 9 中有一个表格，假设它是用于语言学校的。我希望用户可以从下拉列表中选择要学习的语言，并通过使用添加另一个下拉列表的“添加语言”按钮添加多种语言。诀窍是在新的下拉菜单中，下拉选项中不应提供已选择的语言。我遵循了这个问题的第一个答案，一切都很好： How to remove the previously selected option from a drop-down menu in a table?

所以，我有一个包含所有可用语言名称的数组：

languageNames = [
    {'name': "English"}, {'name': "Russian"}, {'name':"Spanish"}, {'name':"Czech"}, {'name':"Croatian"},
    {'name':"Italian"}, {'name':"French"}, {'name':"German"}
  ];

我也在观察用户选择了什么：

@ViewChildren("selectLang") langSelects: QueryList<HTMLSelectElement>;
selectedLangs = new Set<string>();

然后我让用户从下拉列表中选择一种语言：

<mat-select formControlName="name" (selectionChange)="selected()" #selectLang>
    <ng-container *ngFor="let language of languageNames">
        <mat-option *ngIf="selectLang.value === language.name || !isSelected(language.name)" [value]="language.name">
            {{language.name}}
        </mat-option>
    </ng-container>
</mat-select>

在选择更改时，我清除我的 selectedLangs 集，从我的表单中获取所有值并将它们添加回来：

selected() {
    this.selectedLangs.clear();
    for (let c of this.languageForm.controls) {
      const selectedVal = c.get('name').value;
      if (selectedVal && selectedVal !== "undefined") this.selectedLangs.add(selectedVal);
    }
  }

这就是我检查是否应该显示我的选项的方式：

isSelected(lang: string) {
    return this.selectedLangs.has(lang);
  }

效果很好。

但是，假设未来的用户想要编辑他或她的提交。当我获取我的数据时，我将选定的语言添加到selectedLangs 字符串集，对我的传入数据和selectedLangs.add(lang) 使用forEach 循环。我希望他们在该字符串集中的原因是，如果用户添加了一个新的下拉菜单来添加新语言，那么他们之前选择的语言不应该在下拉选项中可用。但这是这个逻辑的问题 - 在我的编辑表单中，我只有在用户之前提交表单时选择的每种语言的空下拉列表，因为它们位于 selectedLangs 集合中。

这些下拉菜单应填充提交表单时选择的语言，但它们是空的

如何在我编辑表单时显示之前选择的值，以便用户可以看到他选择了哪些语言，但功能在创建表单时非常有用？

Answer 1

使用 JS，您可以使用 .value 设置选定的值 selectElement.value = "选定的值";该值需要与选项值中的值相同。