как сохранить значение, выбранное в mat-select angular 5

Question

Я использовал компонент выбора матов в своем проекте, для которого код:

        <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 на данный момент, а значения параметров матов 1 и 2, но при загрузке страницы все еще не выбран первый вариант.

Answer 1

Поскольку вы используете Контроль формы, используйте опцию setValue из компонента.

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

Answer 2

Вам нужно использовать [(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>