Как я могу динамически создавать и исправлять значение поля выбора в реактивной форме Angular?

Я создал реактивную форму Angular. У меня есть поле выбора, которое я динамически заполняю значениями, возвращаемыми из вызова API.

Я также смог исправить значение моих полей формы.

Я пытаюсь динамически создать поле выбора и исправить значение на том же шаге.

Я пробовал различные комбинации создания элементов управления формы и patchValue безрезультатно.

Первое, что я делаю, это вызываю конечную точку API и обрабатываю возвращенный объект массива.

// The API returns an array of items
elTimecard.timecardDets.forEach((elTimecardDets, i) => {
    // Code dynamically creates the form control fields
    this.addWorkTracked(elTimecardDets);
});

Как показано в вышеупомянутом коде, я перебираю возвращенный массив, чтобы создать поля управления формой.

// Adds a row of form controls to the form array to track items worked.
// Parameter is optional so that the method can be used to create an empty row of form control fields
addWorkTracked(data?: ITimecardDet): void {
  // Push the new form control fields to the array
  this.timecardDets.push(this.buildWorkTracked(data));
}

Затем я создаю фактические элементы управления формой

buildWorkTracked(data?: ITimecardDet): FormGroup {
    if (data) {
      // This code should dynamically create the new row of form control
      // fields and set the values based upon the data values passed 
      // through via the API call
      return new FormGroup({
        payCategory: new FormControl(this.buildPayCategories()),
        shiftDifferential: new FormControl(
          this.buildShiftDifferentialCategories()
        ),
        overtimeCategory: new FormControl(this.buildOvertimeCategories()),
        hoursWorked: new FormControl(data.hours),
        earnings: new FormControl({
          value: (this.baseRate * data.hours).toFixed(2),
          disabled: true
        })
      });
    } else {
      // Create a new row of 'clean' form control fields
      return new FormGroup({
        payCategory: new FormControl(this.buildPayCategories()),
        shiftDifferential: new FormControl(
          this.buildShiftDifferentialCategories()
        ),
        overtimeCategory: new FormControl(this.buildOvertimeCategories()),
        hoursWorked: new FormControl('0:00'),
        earnings: new FormControl({ value: null, disabled: true })
      });
    }
  }
// Code that builds the select options
buildPayCategories() {
    this.payCategories = this.timeEntry.payCategories;
    return this.payCategories;
}

Вот HTML, если нужно

<select
    matNativeControl
    formControlName="payCategory"
    id="{{ payCategory + i }}">
    <option
        *ngFor="
        let payCategory of payCategories;
        let payCategoryIndex = index"
        [ngValue]="payCategoryIndex">
            {{ payCategory.description }}
    </option>
</select>

Я хотел бы, чтобы первый раздел моего предложения if, который получает данные, динамически создавал поля выбора управления формой и устанавливал выбранное значение на основе значения данных.

Например, если данные возвращают 1, а у меня есть четыре элемента (со значениями 0, 1, 2, 3) в раскрывающемся списке выбора, я хочу, чтобы был выбран второй элемент, поскольку он был возвращен из вызова API.