Как создать динамическое раскрывающееся поле в реактивной форме на странице редактирования в угловых 6

Question

Я создал раскрывающееся поле со значениями API.Но я получаю все данные и отображаю их на странице редактирования.но раскрывающееся поле отображается со всеми раскрывающимися значениями, а не с ранее сохраненным раскрывающимся значением.Это код раскрывающегося поля на странице Edit.component.html.

  <div class="form-group">
  <label for="typeofWorkId" class="control-label"> Type of Work </label>
  <select id="typeofWorkId" appSelectValidator="select" name="typeofWorkId" class="form-control">
    <option value="Select">Select Type of work</option>
    <option *ngFor="let typeName of typeofworks" [value]="typeName.typeofWorkId"> {{typeName.name}} </option>
  </select>
</div>

Это код (edit.component.ts) для получения раскрывающихся значений из API.

 typeofworks: TypeOfWork[];
ngOnInit() {
    this._vendorServices.getTypeOfWork().subscribe((workName) => { this.typeofworks = workName });
}

Answer 1

Вы можете использовать [(ngModel)] для привязки выбранного значения в форме редактирования.

HTML-код:

<div class="form-group">
  <label for="typeofWorkId" class="control-label"> Type of Work </label>
  <select id="typeofWorkId" formControlName="typeofWorkId" appSelectValidator="select" name="typeofWorkId" class="form-control" [(ngModel)]="alreadySelectedValue.typeofWorkId">
    <option value="Select">Select Type of work</option>
    <option *ngFor="let typeName of list" [value]="typeName.typeofWorkId"> {{typeName.name}} </option>
  </select>
</div>

В файле TS:

alreadySelectedValue = { "typeofWorkId": 11, "name": "Water Proofing" }; // Your already selected value

Пример StackBlitz