在编辑组件中设置下拉值

Question

我有一个带有 mat-select 下拉列表的编辑表单。当我转到编辑表单时，我想在下拉列表中设置所选项目。为此我调用服务来获取当前值。

我的html：

  <mat-form-field appearance="outline">
                  <mat-select formControlName="organisationUnit" placeholder="Organisation Unit" [(value)]="selected">
                    <mat-option *ngFor="let unit of orgUnits" [value]="unit.id" >
                      {{unit.name}}
                    </mat-option>
                  </mat-select>
                </mat-form-field>

我的ts：

  ngOnInit() {

    this.setupFirstFormGroup();
    this.setupSecondFormGroup();
    this.firstFormGroup.get('status').setValue(true);
    this._route.params.subscribe(params => {
      this.tenantAdminService.getUser(params.id).subscribe(res => {
        this.firstFormGroup.get('first_name').setValue(res['first_name']);
        this.firstFormGroup.get('last_name').setValue(res['last_name']);
        this.tenantAdminService.getOrganizationUnit(res['organizationUnit']).subscribe(res => {
          console.log("ORGUNIT", res);
          this.selected = res['id'];

          this.firstFormGroup.get('organisationUnit').setValue(res['id']);

        });

      });
    });

  }

目前它没有在下拉列表中设置值并且它是空的。它打印出值，但所选选项未显示为选中

Answer 1

为了预先选择值，您需要将模型绑定到select 列表。

<mat-form-field appearance="outline">
      <mat-select [(ngModel)]="your_model_name" formControlName="organisationUnit" placeholder="Organisation Unit" [(value)]="selected">
           <mat-option *ngFor="let unit of orgUnits" [value]="unit.id" >
                {{unit.name}}
           </mat-option>
       </mat-select>
</mat-form-field>

当您绑定模型，并在您的组件中预设模型所需的值时，预选的值将显示在select 列表中。另外，请注意，如果您的下拉值不是字符串，则需要使用[ngValue]="..." 而不是[value]="..."，因为value 仅支持字符串。

所以现在如果我们使用模型myUnit:

...
<mat-select [(ngModel)]="myUnit" ...
...

在我们的组件中：

this.myUnit = { ... , id: 1}; // pre-selecting a demo unit object

从我们的下拉列表中，将预先选择带有unit.id = 1 的单元。

如果您收到警告：

您似乎在与 formControlName 相同的表单字段上使用 ngModel。 Angular v6 中已弃用对使用 ngModel 输入属性和 ngModelChange 事件和响应式表单指令的支持，并将在 Angular v7 中删除

请注意：如果您正在寻找 Angular 6 文档，请使用 this。 参考来自official docs 的弃用，如果我们想替换它，有三种可能的选择：
1. 使用响应式表单

// html
<mat-form [formGroup]="form"> ... 
    <mat-select formControlName="organisationUnit"> ...
    ....
</form>
// Component: 
this.form.get('organisationUnit').setValue('your preset value');

1. 使用模板驱动的表单

2. 关闭此警告（不推荐使用）

   进口：[ ReactiveFormsModule.withConfig({warnOnNgModelWithFormControl: 'never'}); ]

之前有人问过这个类似的关于弃用的问题，请参阅原始stackoverflow post以获取cmets和答案。我只是提供了已接受的答案，以防帖子被删除并且链接已过时。