Question

我有一个带有包含美国各州的下拉列表的表单，该表单来自如下所示的ts文件

{
    "name": "Alabama",
    "abbreviation": "AL"
}, //and so on...

我登录的用户的状态为：“ AL”，我需要在下拉菜单“阿拉巴马州”中显示。

如何执行此操作？这是我到目前为止尝试过的，但是我不知道如何使用状态文件

 this.vendorInformationForm = this.fb.group({
      city: [currentUser.city, Validators.maxLength(20)],
      state: [currentUser.state, [Validators.required]],

这是我的下拉元素

        <!--state-->
        <div class="form-row">
            <div class="col-12">
              <div class="form-group">
                <label for="state">State</label>
                <select class="form-control" id="state" #p formControlName="state">
                  <option required *ngFor="let state of states" [value]="state" [selected]="state">
                    {{state.name}}
                  </option>
                </select>
              </div>
            </div>
        </div>

Answer 1

从选项标签中删除[selected]并按如下所示设置[value]。

<option *ngFor="let state of states" [value]="state.abbreviation">{{state.name}} 
</option>

查看此演示-https://stackblitz.com/edit/angular-6-reactive-forms-wdux4r

包含用户详细信息的下拉菜单中的选定选项

1 个答案: