Как динамически назначить свойство Value и свойство Text пользовательскому элементу управления в Angular на основе элемента управления select?

Question

Я пытаюсь создать пользовательский элемент управления в Angular на основе элемента управления HTML.

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

Рассмотрим строку ниже:

<option *ngFor="let x of values" [value]="x.id">{{x.name}}</option>

Мое поле значения не всегда может называться «id», а мое текстовое поле не всегда может называться «name».При отображении этого элемента управления я хотел бы, чтобы они основывались на свойствах, которые можно установить во время разработки.Например: valueField и textField

Вот мой компонент до сих пор - все работает, кроме моей способности динамически устанавливать, какое свойство будет связано со значением элемента, а какое свойство будет связано с именем:

import { Component, Input, forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'steve-select',
  template: `
    <select *ngIf="!readonly" (change)="onChange($event)" [(ngModel)]="selectValue" [disabled]="disabled">
      <option *ngFor="let x of values" [value]="x.id">{{x.name}}</option>
    </select>
    <span *ngIf="readonly">{{readOnlyText}}</span>
  `,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => StevesSelectComponent),
      multi: true
    }
  ]
})
export class StevesSelectComponent implements ControlValueAccessor {

  @Input()
  public readonly: boolean = false;

  @Input()
  public disabled: boolean = false;

  @Input()
  public values;

  @Input()
  public valueField: string

  @Input()
  public textField: string

  @Input()
  public readOnlyText: string          

  private _selectValue: any = '';
  private _onTouchedCallback: () => {};
  private _onChangeCallback: (_: any) => {};

  get selectValue(): any {
    return this._selectValue;
  }
  set selectValue(value: any) {
    if (value !== this._selectValue) {
      this._selectValue = value;
      this._onChangeCallback(value);
    }

    this._onTouchedCallback();
  }

  //From ControlValueAccessor interface
  writeValue(value: any) {
    this._selectValue = value;
  }

  //From ControlValueAccessor interface
  registerOnChange(fn: any) {
    this._onChangeCallback = fn;
  }

  //From ControlValueAccessor interface
  registerOnTouched(fn: any) {
    this._onTouchedCallback = fn;
  }
}

Вот как я предполагаю использование этого элемента управления:

<steve-select name="ddl1" [readonly]="ro" [disabled]="dis" [values]="jobs" [valueField]="id" [textField]="name" [readOnlyText]="request.jobName" [(ngModel)]="request.jobId" (change)="showChanged()"></steve-select>

Любая помощь будет принята с благодарностью.Спасибо!