将 String 附加到 ngModel 以获取表达式

Question

我有一个业务对象Car{id:2,name:ford,modelNo:123} 我还有一个用于 CarMetaData{columnName:string,type:text,required:true} 的元数据类 每个属性都有自己的 CarMetaData 对象 如何使用 CarMetaData 对象数组以这种方式显示Car 数据

在template.html文件中

<form #carForm='ngForm'>
 <div class="form-group" *ngFor="let metaData of metadata" >
   <input [(ngModel)]="car[metaData.columnName]" name="metaData.columnName" 
    type="text">
 </div>
</form>

在组件文件中

car:Car;
metadata:CarMetaData[];

上述方法不起作用，因为 car[meta.columnName] 中的 [] 在 ngModel 有没有一种方法可以在 *ngFor 或 [(ngModle)] 中计算出一个表达式来计算列名

Answer 1

非常愚蠢的错误。请试试这个：

<div *ngFor="let meta of metaData;">
  <input [(ngModel)]="car[meta.columnName]" name="{{meta.columnName}}"  />
  {{meta.columnName}}
</div>

---

旧答案：

但首先 - 您的循环 (meta in metaData) 是错误的，因为您循环的是数组，而不是对象。所以你最好做let meta of metaData, let i = index。

有趣的部分是ngModel 如何设置ngFor 中的输入值。如果你试试这个：

<div *ngFor="let meta of metaData; let i = index">
  <input [(ngModel)]="car[meta.columnName]" name="meta.columnName"  />
  {{meta.columnName}}
</div>

您将看到所有输入的输入值相同（它是从第一次 ngFor 迭代中挑选出来的，并重复到所有输入）。但是，{{meta.columnName}} 会打印正确的值。所以有一些范围问题。其他奇怪的事情 - 它肯定与ngForm 和输入的name 属性有关。如果您将其移到表单之外 - 一切都会按预期发生。如果你：

<div *ngFor="let meta of metaData; let i = index">
  <input [(ngModel)]="car[meta.columnName]" name="{{metaData[i].columnName}}"  />
  {{meta.columnName}}
</div>

在表单内部 - 再次，一切正常。所以这可能是你的解决方法。

这是DEMO。希望有人能进一步解释。

Answer 2

我建议将两个对象都放在一个包装对象中。例如

export class CarWrapper {
    constructor(
       car: Car,
       carMetaData: CarMetaData
    ) {}
}

然后在这个包装器中构建一个连接两个对象的方法

private carWrapper: Array<CarWrapper> = [];

private fillCarWrapper(): void {
    // your code here
}

在你的模板中你的行为是这样的

<form #carForm='ngForm'>
   <div class="form-group" *ngFor="let wrapper of carWrapper">
      <input [(ngModel)]="wrapper.car" name="wrapper.carMetaData.columName" type="text">
   </div>
</form>