получить значение по умолчанию для выбора одного меню

Question

У меня есть два класса, где отображение:

User   *--------------------1    Sexe

У меня есть список пользователей в list-users.component.html . После выбора одного пользователя для модификации я буду перенаправлен на modify-user.component.html

Ниже приведены необходимые файлы: * list-users.component.html :

<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>

где userbs получается с помощью сервиса userService.getUsersList() с типом Observable<User[]>.

modify-user.component.html :

<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>

и modify-user.component.ts is:

export class ModifyUserComponent implements OnInit
{
  editForm: FormGroup;
  submitted = false;
  private selectedSexe;
  users: Observable<User[]>;
  libelleSexe: string;
  usrId: String;
  selectedSexeUserCompare = {num: localStorage.getItem("selectedSexeId"), name: localStorage.getItem("selectedSexeName")}
  sexeName: String;

  sexes:Array<Object> =
  [
      {num: 1, name: "Female"},
      {num: 2, name: "Male"}
  ];

  compareFn(a, b)
  {
    console.log(a, b, a && b && a.num == b.num);
    return a && b && a.num == b.num;
  }

  constructor(private formBuilder: FormBuilder, private router: Router, private userService: UserService) {}

  ngOnInit()
  {
      this.sexeName = localStorage.getItem("sexeLibelle");

      let userId = localStorage.getItem("editUserId");
      this.usrId = localStorage.getItem("editUserId");
      if(!userId)
      {
          alert("Invalid action.")
          this.router.navigate(['users-list']);
          return;
      }

      this.userService.getUserEntityId(+userId).map(se=> se.sexe.libelle).subscribe((response)=>
      {
          this.libelleSexe = response;
          localStorage.setItem("sexeLibelle", this.libelleSexe);
      });


      this.editForm = this.formBuilder.group
      ({
          id: [],
          name: ['', Validators.required],
          username: ['', Validators.required],
          email: ['', Validators.required],
          password: ['', Validators.required],
          age: ['', Validators.required],
          active: ['false']
      });

      this.userService.getUserId(+userId).subscribe( data =>
      {
          this.userService.getUserEntityId(+userId).map(se=> se.sexe.libelle).subscribe((response)=>
          {
              this.libelleSexe = response;
              let sexe = this.userService.getSexeByLibelle(this.libelleSexe);
              localStorage.setItem("sexeLibelle", this.libelleSexe);
              this.editForm.patchValue(data);
          });
      });
  }

  onChangeSexeName($event)
  {
      this.selectedSexe = $event.target.options[$event.target.options.selectedIndex].text;
  }

  onSubmit()
  {
      this.userService.updateUsera(this.editForm.value, this.selectedSexe).subscribe(data => 
      {
          this.router.navigate(['users-list']);
      },
      error =>
      {
          alert(error);
      });
  }

}

На странице modify-user я обычно получаю первую половинку в списке полов (Женщина, Мужчина) и НЕ правильную половинку Точно так же, как это снимок экрана отображается.

Could you please help me solving that issue ?.
Thanks a lot.

Answer 1

Я не уверен, почему вы не добавляете sex к вашему editForm. Добавьте sex к вашему editForm и инициализируйте его значением, сохраненным в вашем localStorage.

this.editForm = this.formBuilder.group
  ({
    ...
    sex: [selectedSexeUserCompare.num, Validators.required]
    ...
  });

Другая проблема, которую я заметил в вашем HTML, заключается в том, что вы устанавливаете ngValue в вашем options для всего объекта sexe. Лучше установить уникальное значение, например свойство num в вашем sexe объекте.

модификация-user.component.html

<select formControlName="sex" (change)="onChangeSexeName($event)" class="form-control select2" style="width: 100%;">
  <option *ngFor="let sexe of sexes" [ngValue]="sexe.num">{{sexe.name}}</option>
</select>

Редактировать : Вот рабочий пример для StackBlitz