Angular ngFor循环中的动态绑定ngf模型

我正在尝试创建一个角度对话框，该对话框将根据给定对象的关键点动态创建输入。我的主要问题是绑定[（ngModel）]，最终它应该类似于[（ngModel）]=“data.id”

对话框html:

<h1 mat-dialog-title>Add Customer </h1>
<div mat-dialog-content>

  <mat-form-field *ngFor="let item of myKeys; let index = index; trackBy:index;" >
    <input matInput
      type="string"
      name={{item}}
      placeholder={{item}}
      [(ngModel)]="data.item"  
      >
  </mat-form-field>

</div>

You chose: <i>{{data.name}}</i>

<div mat-dialog-actions>
  <button mat-button (click)="onNoClick()">No Thanks</button>
  <button mat-button [mat-dialog-close]="data" cdkFocusInitial>Ok</button>
</div>e

添加客户
您选择：{{data.name}
不，谢谢
好啊
E

对话框角度组件ts:

@Component({
  selector: 'app-dialog-edit',
  templateUrl: './dialog-edit.component.html',
})
export class DialogBoxEditComponent {
  test = [
    'data.id',
    'data.name',
    'data.address',
    'data.city',
    'data.payment'
  ];

  myKeys = this.getMyKeys(this.data);

  @Output() editMode = new EventEmitter();

  constructor(
    public dialogRef: MatDialogRef<DialogBoxEditComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) {}

  onNoClick(): void {
    this.dialogRef.close();
  }
  getMyKeys(myData) {
    return Object.keys(myData);
  }
  getType(myIn) {
    return typeof(myIn);
  }
  getty(mytest) {
    return 'data.' + mytest;
  }
}

@组件({
选择器：“应用程序对话框编辑”，
templateUrl:“./dialog edit.component.html”，
})
导出类对话框组件{
测试=[
“data.id”，
“data.name”，
'数据.地址'，
"数据城市",，
“数据。付款”
];
myKeys=this.getMyKeys（this.data）；
@Output（）editMode=neweventemitter（）；
建造师(
公共dialogRef:MatDialogRef，
@注入（MAT_DIALOG_DATA）公共数据：any{}
onNoClick（）：void{
this.dialogRef.close（）；
}
getMyKeys（myData）{
返回Object.keys（myData）；
}
getType（myIn）{
返回类型（myIn）；
}
盖蒂（我的测试）{
返回“数据”。+mytest；
}
}

我所尝试的：

@Component({
  selector: 'app-dialog-edit',
  templateUrl: './dialog-edit.component.html',
})
export class DialogBoxEditComponent {
  test = [
    'data.id',
    'data.name',
    'data.address',
    'data.city',
    'data.payment'
  ];

  myKeys = this.getMyKeys(this.data);

  @Output() editMode = new EventEmitter();

  constructor(
    public dialogRef: MatDialogRef<DialogBoxEditComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) {}

  onNoClick(): void {
    this.dialogRef.close();
  }
  getMyKeys(myData) {
    return Object.keys(myData);
  }
  getType(myIn) {
    return typeof(myIn);
  }
  getty(mytest) {
    return 'data.' + mytest;
  }
}

[（ngModel）]=“data.item”导致所有输入共享data.id作为一个ngModel

[（ngModel）]=“test[index]”在这里，我尝试在组件中创建一个数组，该数组将返回所需的绑定，但这会将测试数组值填充到输入字段中，但没有进行绑定

[（ngModel）]=“test.item”不是数组，这里test是一个对象。这也导致了第一个示例中的单一共享绑定链接。（见下图）

任何事情都将不胜感激

<mat-form-field *ngFor="let item of myKeys; let index = index; trackBy:index;" >
  <input matInput type="string"
    name={{item}} placeholder={{item}}
    value = {{ data[item] }} #foo>
</mat-form-field>

将#foo添加到输入，这会将#foo绑定到每个元素，并且您的ng模型不会共享