У меня есть форма в Angular 9, скажем, для языковой школы. Я хочу, чтобы пользователь мог выбрать язык для изучения из раскрывающегося списка И добавить несколько языков с помощью кнопки «Добавить язык», которая добавляет другой раскрывающийся список. Хитрость в том, что в новом раскрывающемся списке уже выбранные языки не должны быть доступны в раскрывающихся списках. Я последовал за первым ответом на этот вопрос и все хорошо: Как удалить ранее выбранную опцию из выпадающего меню в таблице?
Итак, у меня есть массив, содержащий все доступные названия языков:
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 Set, используя forEach l oop для входящих данных и selectedLangs.add(lang). Причина, по которой я хочу их в этом наборе строк, заключается в том, что если пользователь добавляет новый раскрывающийся список для добавления нового языка, его ранее выбранные языки не должны быть доступны в раскрывающихся списках. Но вот проблема с этим логом c - в моей форме редактирования у меня есть только пустые выпадающие списки для каждого языка, выбранного, когда пользователь ранее отправил форму, потому что они находятся в наборе selectedLangs.
Эти выпадающие списки должны быть заполнены языками, выбранными при отправке формы, но они пусты
Как показать ранее выбранные значения при редактировании моего форма, чтобы пользователь мог видеть, какие языки он выбрал, но с функциональностью, которая прекрасно работает при создании формы?