Угловые реактивные формы - Как установить значение по умолчанию выбора / выпадающего управления?

Question

На этой неделе я столкнулся с проблемой, когда выпадающий контроль углового материала не заполнял значение по умолчанию, поступающее из API.Мой источник данных выглядел так:

public selectDataSource = [{
                    id: 1,
                    name: 'Option 1'
                }, {
                    id: 2,
                    name: 'Option 2'
                }, {
                    id: 3,
                    name: 'Option 3'
                }];

Значение приходило из API как:

{
'selectedOption': {
                    id: 2,
                    name: 'Option 2'
                }
}

Но почему-то, когда я присвоил значение полю управления реактивной формой, он неполучить автозаполнение, которое в идеале должно быть ожидаемым поведением.

Причина, ответьте ниже .... Продолжайте

Answer 1

У меня была та же проблема с раскрывающимися списками, в которых не отображаются уже сохраненные / выбранные варианты, и этот ответ на другой вопрос, наконец, помог.

Решение состоит в использовании свойства [compareWith]="compareFunction" для выбора.тег для переопределения сравнения по умолчанию.Ссылаясь на пользовательскую функцию сравнения, вы можете настроить, как должно работать сопоставление исходного значения с раскрывающимися значениями.

Мое текущее решение:

<mat-form-field>
   <mat-select formControlName="gender" [compareWith]="compareSelectValues">
      <mat-option *ngFor="let gender of genderValues" value="{{gender.id}}">{{gender.label}}</mat-option>
   </mat-select>
</mat-form-field>

И функция Typescript:

private compareSelectValues(selectedValue, compareValue): boolean {
   return Number(selectedValue) === compareValue;
}

Number() необходимо, поскольку значение преобразуется в строку после установки его в HTML.Использование компонентов дизайна материала здесь, но, глядя на другой пост, это не должно изменить общую функциональность.Надеюсь, это поможет кому-то, кто найдет этот вопрос раньше другого, как я.

Answer 2

После всех исследований я пришел к выводу, что Angular сделает значение по умолчанию выбранным, только если оно указывает на то же место в памяти, что и в исходном массиве dataSource.

InВ приведенном выше примере selectDataSource хранится в другой ячейке памяти, тогда как значение, поступающее из API, указывает на другую ячейку памяти.

Решение: Переберите исходный источник данных и отфильтруйте сопоставленные данные.запись с результатом из API, чтобы получить выбранный объект из исходного источника данных, и это все, что вы сделали.Примерно так:

selectedOption = selectedDataSource.filter((option) => option.id === selectedOption.id)[0];

Теперь мы выбрали опцию, указывающую на ту же область памяти из исходного массива dataSource.

Ниже приведена ссылка на решение.Попробуйте переключить переменную solveProblem, чтобы увидеть поведение по умолчанию (при указании на другую область памяти).

https://stackblitz.com/edit/angular-reactive-dropdown-control

В Надежде, это когда-нибудь кому-нибудь поможет.

Спасибо, Маниш Кумар