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

Question

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

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

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

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

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

标签： angulartypescriptangular-reactive-forms

Answer 1

帖子所有者要求的根本原因说明

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

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

当team是一个数组时（例如：[2]），比较逻辑将是：

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

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

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

---

解决方案

因此，您不需要强制转换people.gender为people.teamarray，这会破坏现有的逻辑。

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

StackBlitz 上的示例解决方案