I currently have two classes with a mapping structure as follows:
User *--------------------1 Sexe
Users are listed in the file list-users.component.html. When selecting a user for modification, I am redirected to the modify-user.component.html
Below are the necessary files: * the list-users.component.html is:
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Sexe</th>
</tr>
</thead>
<tbody *ngIf="!loader">
<tr *ngFor="let user of userbs | async" style="width: 1500px;">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.sexe.libelle}}</td>
</tr>
</tbody>
</table>
where userbs is retrieved using the service userService.getUsersList() with the type Observable<User[]>.
the modify-user.component.html is:
<form [formGroup]="editForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="name">Name</label>
<input type="text" formControlName="name" placeholder="Name" name="name" class="form-control" id="name">
</div>
<div class="form-group">
<label for="name">Sexe</label>
<select (change)="onChangeSexeName($event)" class="form-control select2" style="width: 100%;">
<option *ngFor="let sexe of sexes" [ngValue]="sexe" [selected]="selected">{{sexe.name}}</option>
</select>
==> Original Sexe: {{selectedSexeUserCompare.name}}
</div>
<button class="btn btn-success">Update</button>
</form>
and modify-user.component.ts is:
export class ModifyUserComponent implements OnInit {
//Code snippet provided...
}
Upon visiting the modify-user page, I encounter an issue where the displayed sexe libelle does not match the correct value from the list of sexes. The discrepancy can be seen clearly in this screenshot.
If you have any insights or solutions to resolve this issue, your assistance would be greatly appreciated. Thank you.