Angular

Question

我正在创建一个用于编辑用户数据的表单，但当我需要在表单中使用两个“selects”时，我陷入了僵局。

这里的好奇心是 select 可以正常工作而另一个不能正常工作。

我的代码在component.ts:


teams = [
    {id: 0, name: Team[Team.Mobile]},
    {id: 1, name: Team[Team.Frontend]},
    {id: 2, name: Team[Team.Backend]}
  ]

  genders = [
    {id: 0, name: Gender[Gender.Male]},
    {id: 1, name: Gender[Gender.Female]},
    {id: 2, name: Gender[Gender.Other]},
  ]

  employeeForm = this.formBuilder.group({
    name: '',
    gender: [2],
    birthDate: '',
    email: '',
    startDate: '',
    cpf: '',
    team:[2]
  });  

  ngOnInit(): void {        

    this.peopleService.getPeopleById(this.list[0].employeeId)
      .subscribe(
        people => {    
          
          this.employee = people;
          
          this.employeeForm.patchValue({
            name: people.name,
            gender: [people.gender],
            birthDate: new Date(people.birthDate),
            email: people.email,
            startDate: new Date(people.startDate),
            cpf: people.cpf,
            team: [people.team]
          });
        },
        error => console.log(error)
      );
  }

  get gender() {
    return this.employeeForm.get('gender').value;
  }

  get team() {
    return this.employeeForm.get('team').value;
  }

我的 HTML 模板：

<form [formGroup]="employeeForm" (ngSubmit)="onSubmit()">                
       
       ...

       <div class="form-group">
            <label for="gender">Gender</label>            
            <select class="form-control" id="gender" formControlName="gender">
                <ng-container *ngFor="let genderEl of genders">
                    <option [ngValue]="genderEl.id" [selected] = "gender == genderEl.id">{{genderEl.name}}</option>
                </ng-container>        
            </select>
        </div>                   

        <div class="form-group">
            <label for="team">Team</label>
            <select class="form-control" id="team" formControlName="team">                
                <ng-container *ngFor="let teamEl of teams">
                    <option [ngValue]="teamEl.id" [selected] = "team == teamEl.id">{{teamEl.name}}</option>
                </ng-container>
            </select>
        </div>

        ...
     
    </form>

我已经尝试制作一个条件容器来做同样的事情，它甚至适用于性别块，但是当我为“团队”做同样的事情时 select，它是一样的打印方式。

它在屏幕上的显示方式打印：

Answer 1

Post所有者

请求的根本原因的解释

gender 和 team 不工作的原因是由于这个逻辑：

[selected]="team == teamEl.id"

当team为数组时（例如：[2]），比较逻辑为：

[selected]="[2] == 2"

其中要比较的两个值是不同的值和类型。

此逻辑工作正常，因为 要求确认 team 和 gender 不是数组。

解决方案

因此，您不需要将 people.gender 和 people.team 转换为数组 ，这会破坏现有逻辑。

this.employeeForm.patchValue({
  ...,
  gender: people.gender,
  team: people.team
});

Sample Solution on StackBlitz

Angular - 为什么“[selected]”在一个案例中有效而在另一个案例中无效？

Angular - Why the "[selected]" works in a case but not in another?

typescript

angular-reactive-forms

Post所有者

解决方案