Entonces, tengo userSettings donde tengo dafaultPreset (que es la identificación) y tengo una lista de user presets . Y quiero mostrar el ajuste preestablecido predeterminado en el elemento de selección HTML, donde el usuario puede cambiar los ajustes preestablecidos.

En HTML tengo una opción de selección como esta:

 <select class="form-control" name="bg" id="" (change)="patchPreset($event)" [ngModel]="userSettings?.defaultPreset"> <option value="null" disabled>Select Preset</option> <option *ngFor="let preset of userPresets" value="{{preset.id}}">{{preset.name}}</option> </select>

Y en mi archivo .ts , cuando agrego un nuevo preset al usuario, llamo a una API para obtener todos los presets del usuario y los asigno de nuevo así: this.userPresets = response; .

En ese momento, el valor predeterminado en el elemento de selección de HTML cambia al primer elemento de userPresets , incluso si la identificación defaultPreset no cambia. Cuando actualizo la página, entonces funciona bien.

Ejemplo

 userPresets = [{id:1, name:1}, {id:2, name:2}, {id:3, name:3}]; userSettings.defaultPreset = 2;

Y muestra 2 en el elemento de selección HTML . Cuando vuelvo a llamar a la API para obtener todos los presets y asignarlos a userPresets , luego en el elemento seleccionado muestra 1 . ¿Alguien puede explicarme dónde me equivoco?