如何基于select控件动态地将Value属性和Text属性以角度指定给自定义控件?

在呈现此控件的选项时,如何动态分配将用于值和文本的属性?

请考虑下面这一行:

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