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

【问题标题】：how to keep a value selected in mat-select angular 5如何保持在 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

标签： angular angular5 angular-components

【解决方案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);

【讨论】：