I am new at this. I have a select option in angular 12 with an asp.net api, the problem is that when editing the fields in a form, the corresponding data in the company select option is not returned.
As seen in the image, the password and user data are displayed correctly, but the company that corresponds to the user is not displayed in the select option.
html-file
<form [formGroup]="formulario" >
<div class="col-lg-6 form-group mb-3">
<span class="input-group">Empresa</span>
<select class="form-select campo-select" (change)="ChangeEmpre($event)" >
<option value="" disabled selected>Seleccione empresa</option>
<option [value]="emp.idEmpresa" *ngFor="let emp of empresa">
{{ emp.nombreComercial }}
</option>
</select>
</div>
</form>
typescript file
empresa:any=[];
SelectEmpre:any;
ChangeEmpre(e){
console.log(e.target.value)
this.SelectEmpre=e.target.value;
}
editClick(ce:any){
this.SelectEmpre=ce.idEmpresa;
}
Replicate the problem in stackblitz to make the example code more complete and readable: https://stackblitz.com/edit/angular-ivy-93j2ek?file=src/app/app.component.ts&view=editor
I have modified the stackblitz for you to have a working example
https://stackblitz.com/edit/angular-ivy-f9cafp?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.module.ts,src% 2Fenvironments%2Fenvironment.ts&view=editor
Here is also the explanation:
Here are the two parts of the code:
AppComponent.html
AppComponent.ts
PS: Data is not synced from backend (API)
Hope this can help you