在选择列表中设置所选项目 - Angular2

Question

我的firebase表中有以下数据结构：

在我的Angular2应用程序中，我检索条目并将其显示在select list中，如下所示：

<select class="form-control" id="lookingFor" formControlName="gender" >
   <option value="" selected>Please Select</option>
   <option *ngFor="let status of genderValue" [value]="status.id">{{ status.description}}</option>
</select>

正如您所看到的，我在列表中的第一项是请选择，默认情况下会在保存其个人资料之前将其选中。我遇到的问题是，当他们保存了自己的个人资料并重新加载编辑个人资料页面时，所选的值当然是“请选择＆＃39;什么时候应该是男性还是女性。

经过一些搜索，我添加了以下属性[selected]我的代码现在看起来像这样：

<select class="form-control" id="lookingFor" formControlName="gender" >
       <option value="" selected>Please Select</option>
       <option *ngFor="let status of genderValue" [value]="status.id" [selected]="editProfileForm.controls.gender">{{ status.description}}</option>
    </select>

但是，在运行项目时，即使我从male中删除值，它也会选择Firebase作为默认值，但它始终保持为男性选择。

关于我在ts文件中执行的操作，我只需调用Firebase构建选择列表，然后调用get User Profile，然后将配置文件值传递到我的表单设置（被动）。 / p>

所以我的问题是，如果用户未指定其性别，或者如果他们已指定了性别，则我如何选择Please Select，然后将相关项目设置为已选中。

注意：我使用firebase生成的uniqueId作为用户保存其个人资料时保存的值。

这是我配置表单的部分：

// userProfile is returned from Firebase
// gender will either have a value or it'll be null.
this.editProfileForm = new FormGroup({
    seeking: new FormControl('', Validators.required),
    gender: new FormControl(this.userProfile.gender, Validators.required)
 });

配置editProfileForm后，它会清除显示性别的值：

Answer 1

因为editProfileForm.controls.gender总是true（它是表单控件实例本身），您必须检查editProfileForm.controls.gender.value的值是否与{{status.id相同1}}

Answer 2

userProfile.gender中的值应该与选项值相关，因此它被选中。

<select class="form-control" id="lookingFor" formControlName="gender" [(ngModel)]="userProfile.gender">
       <option value="" selected>Please Select</option>
       <option *ngFor="let status of genderValue" [ngValue]="status.id">{{ status.description}}</option>
    </select>