获取选择一个菜单的默认值

Question

我有两个类，其中的映射是：

class Foo2() : BaseClass(whatever) {

    companion object {
        private val whatever = Object()
    }

}

我在 list-users.component.html 上有用户列表。选择一个用户进行修改后，我将被重定向到 modify-user.component.html

以下是必需的文件： * list-users.component.html 是：

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

其中<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()获得的。

modify-user.component.html 是：

Observable<User[]>

和 modify-user.component.ts 是：

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

在修改用户页面上，我通常性别列表中的第一个性爱诽谤（女性，男性），并且没有正确的性爱诽谤< / strong>，就像显示的screenshot一样。

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);
      });
  }

}

Answer 1

我不确定您为什么不将sex添加到您的editForm中。将sex添加到editForm中，并使用存储在localStorage中的值进行初始化。

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

我在您的HTML中注意到的另一个问题是，您将ngValue中的options设置为整个sexe对象。您应该将其设置为唯一的值，例如num对象中的sexe属性。

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

上的有效示例