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

Question

我有一个业务对象 Car{id:2,name:ford,modelNo:123} 我还有一个元数据 class 用于 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[];

由于[] in car[meta.columnName] in the ngModel 有没有一种方法可以在 *ngFor 或 [(ngModle)] 中计算表达式来计算 columName

Answer 1

我建议将两个对象放在 wrapper-object 中。例如

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>

Answer 2

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

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

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

append String to ngModel to get an expression

html

typescript

angular-ngmodel

angular