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

Question

我有一个业务对象 Car{id:2,name:ford,modelNo:123} 我还有一个 MetaData 类用于 CarMetaData{columnName:string,type:text,required :真 每个属性都有自己的 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)] 中计算出一个表达式来计算 columName

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 .希望有人能进一步解释。