如何保持在 mat-select angular 5 中选择的值

Posted 2023-03-13

【中文标题】如何保持在 mat-select angular 5 中选择的值

【英文标题】：how to keep a value selected in mat-select angular 5

【发布时间】：2018-11-15 15:38:42

【问题描述】：

我在我的项目中使用了一个mat-select组件，代码是：

        <div class="col-md-6">
      <mat-form-field>
        <mat-select placeholder="Select Job" formControlName="job_instruction_id" [(value)]="jifId">
          <mat-option *ngFor="let jif of jifList" [value]="jif.id">
            jif.id..... jif.jif_no  ----  jif.job_name 
          </mat-option>
        </mat-select>
      </mat-form-field>
    </div>

jifId 目前持有值1，mat 选项值为1 和2，但页面加载时仍然没有预先选择第一个选项。

【问题讨论】：

在初始化响应式表单时，将 job_instruction_id 初始化为 1（提及数据类型）。

这可能是help

【参考方案1】：

您需要使用[(ngModel)]

<mat-select placeholder="Select Job" formControlName="job_instruction_id" [(ngModel)]="jifId">
          <mat-option *ngFor="let jif of jifList" value=jif.id>
            jif.id..... jif.jif_no  ----  jif.job_name 
        </mat-option>
</mat-select>

【参考方案2】：

由于您使用的是表单控件，因此请使用组件中的setValue 选项。

this.form.controls['job_instruction_id'].setValue(this.jifId);