Динамическое двухстороннее связывание в угловых 5

Question

Я новичок в угловых 5. Мне нужен способ решить эту проблему: мне нужно установить двустороннюю привязку от источника данных к компоненту ввода. Проблема в том, что каждый раз, когда имя свойства мне нужно связать, меняем его, поэтому мне нужно передать его в html в виде строки, и я хочу, чтобы оно интерпретировалось из html.

Вот код, так что, возможно, вы можете понять лучше.

В файле.ts у меня есть это:

@Component({
    selector: 'app-tabelle-edit-dialog',
    templateUrl: './tabelle-edit-dialog.component.html',
    styleUrls: ['./tabelle-edit-dialog.component.css']
})

export class TabelleEditDialogComponent implements OnInit {

fields;
form: FormGroup;
form_lucene: FormGroup;
item;
id_tab: string;

constructor(private fb: FormBuilder, private service: TabelleService,
    private dialogRef: MatDialogRef<TabelleEditDialogComponent>,
    public dialog: MatDialog,
    @Inject(MAT_DIALOG_DATA) data) {
    this.item = data;
    this.form = fb.group({
        ID: ['',],
    });
    if (this.item.RZ_ID) {
        this.id_tab = this.item.RZ_ID;
        this.fields = [{ PROPERTYNAME: 'RZ_CODICE', NC_NOME_CAMPO: 'CODICE', NC_OBBLIGATORIO: false, NC_VALORE: 'RZ_CODICE' },
            { PROPERTYNAME: 'RZ_DESCRIZIONE', NC_NOME_CAMPO: 'DESCRIZIONE', NC_OBBLIGATORIO: true, NC_VALORE: 'RZ_DESCRIZIONE' },
            { PROPERTYNAME: 'RZ_ORDINE', NC_NOME_CAMPO: 'ORDINE', NC_OBBLIGATORIO: false, NC_VALORE: 'RZ_ORDINE' },
            { PROPERTYNAME: 'RZ_LABEL', NC_NOME_CAMPO: 'LABEL', NC_OBBLIGATORIO: false, NC_VALORE: 'RZ_LABEL' },
            { PROPERTYNAME: 'RZ_CLASS', NC_NOME_CAMPO: 'CLASSE', NC_OBBLIGATORIO: false, NC_VALORE: 'RZ_CLASS' }];
        this.tab_value = this.item.RZ_CODICE;
    }

    if (this.item.TI_ID) {
        this.id_tab = this.item.TI_ID;
        this.fields = [{ PROPERTYNAME: "TI_TIPOACCOUNT", NC_NOME_CAMPO: "TIPO ACCOUNT", NC_OBBLIGATORIO: false, NC_VALORE: 'TI_TIPOACCOUNT' },
        { PROPERTYNAME: "TI_DESCRIZIONE", NC_NOME_CAMPO: "DESCRIZIONE", NC_OBBLIGATORIO: true, NC_VALORE: 'TI_DESCRIZIONE' },
        { PROPERTYNAME: "TI_LABEL", NC_NOME_CAMPO: "LABEL", NC_OBBLIGATORIO: false, NC_VALORE: 'TI_LABEL' },
        { PROPERTYNAME: "TI_ORDINE", NC_NOME_CAMPO: "ORDINE", NC_OBBLIGATORIO: false, NC_VALORE: 'TI_ORDINE' }];
    }

    if (this.item.ST_ID) {
        this.id_tab = this.item.ST_ID;
        this.fields = [{ PROPERTYNAME: "ST_SETTORE", NC_NOME_CAMPO: "SETTORE", NC_OBBLIGATORIO: false, NC_VALORE: 'ST_SETTORE' },
        { PROPERTYNAME: "ST_DESCRIZIONE", NC_NOME_CAMPO: "DESCRIZIONE", NC_OBBLIGATORIO: true, NC_VALORE: 'ST_DESCRIZIONE' },
        { PROPERTYNAME: "ST_LABEL", NC_NOME_CAMPO: "LABEL", NC_OBBLIGATORIO: false, NC_VALORE: 'ST_LABEL' },
        { PROPERTYNAME: "ST_ORDINE", NC_NOME_CAMPO: "ORDINE", NC_OBBLIGATORIO: false, NC_VALORE: 'ST_ORDINE' }];
    }

    this.form_lucene = fb.group({});
}

ngOnInit() {
    this.form_lucene = this.toFormGroup();
}

toFormGroup() {
    let group: any = {};
    this.fields.forEach(field => {
        group[field.PROPERTYNAME] = field.NC_OBBLIGATORIO ? new FormControl('', Validators.required) : new FormControl('');
    });
    return new FormGroup(group);
}
}

Вот HTML-файл:

<form [formGroup]="form">

<div class="col-lg-12">&nbsp;</div>

<input type="hidden" formControlName="ID" [(ngModel)]="id_tab" />

<form [formGroup]="form_lucene">
    <div *ngFor="let field of fields" class="form-row">
        <app-input *ngIf="field.NC_NOME_CAMPO!='ORDINE' "
                   [formControlName]="field.PROPERTYNAME"
                   [_class]="'col-lg-4'"
                   [_placeholder]="field.NC_NOME_CAMPO"
                   [_required]="field.NC_OBBLIGATORIO"
                   [(ngModel)]=item.field.NC_VALORE>
        </app-input>
        <app-numeric *ngIf="field.NC_NOME_CAMPO=='ORDINE' "
                     [formControlName]="field.PROPERTYNAME"
                     [_class]="'col-lg-4'"
                     [_placeholder]="field.NC_NOME_CAMPO"
                     [(ngModel)]=item.field.NC_VALORE>
        </app-numeric>
    </div>
</form>

<div class="col-lg-12">&nbsp;</div>

<div class="button-row">
    * {{'CAMPI_OBBLIGATORI' | translate}}
    <br />
    <button class="pull-right" mat-raised-button (click)="ok()"
            style="margin-left: 30px; margin-right: 10px;">
        {{'OK' | translate}}
    </button>
    <button *ngIf="(item.LB_ID!='0')" class="pull-right" mat-raised-button color="warn" (click)="elimina()">
        {{'ELIMINA' | translate}}
    </button>
</div>
</form>

<div class="col-lg-12">&nbsp;</div>

В зависимости от того, какое условие if активировано, я создаю массив объектов. По моему намерению каждый объект имеет в последнем поле имя свойства, с которым мне нужно двустороннее связывание в html.

То, что я пытаюсь сделать, это прочитать имя этого свойства (то есть, в конце концов, имя столбца из базы данных) и указать html-код привязки к элементу.", Где column_name изменяется каждый раз.

В HTML:

[(ngModel)] = item.field.NC_VALORE <- мне нужно что-то вроде этого, где field.NC_VALORE содержит имя столбца, хранящегося в элементе.

Может быть, есть что-то вроде функции eval php...

Я надеюсь, что смог объяснить, что мне нужно сделать, и что кто-то может мне помочь.

Спасибо вам всем