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

Question

我在项目中使用了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，但页面上仍未预先选择第一个选项负荷。

Answer 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>

Answer 2

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

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