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 input属性和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');

使用模板驱动的表单
使此警告静音（不建议使用）

进口：[ ReactiveFormsModule.withConfig（{warnOnNgModelWithFormControl：'never'}）; ]

以前也曾提出过类似的有关弃用的问题，请参阅原始的stackoverflow post以获得评论和答案。我只是提供了可接受的答案，以防帖子被删除并且链接已过时。

在编辑组件中设置下拉值

1 个答案: