Question

我有一个业务对象Car{id:2,name:ford,modelNo:123}我还有一个CarMetaData {columnName:string,type:text,required:true}的MetaData类每个属性都有自己的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[];

上述方法因为车载[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。希望有人会进一步解释。

Answer 2

我建议将两个对象放在包装对象中。 e.g。

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>

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

2 个答案: