使用 Angular 2 在 ngFor 内的 ngModel 中设置动态属性答案

【问题标题】：Set a dynamic property in ngModel inside ngFor, with Angular 2使用 Angular 2 在 ngFor 内的 ngModel 中设置动态属性
【发布时间】：2016-12-27 04:19:43
【问题描述】：

我有一个组件：

“selectedData”：任意
“fields”：字段数组。字段是具有以下属性的对象：标签和类型。这些字段描述对象“selectedData”

示例：

selectedData = { Label:"test", IsUsed:false}

fields = [{name:'label', type:'string'},{name:'IsUsed, type:'boolean'}

我正在尝试生成一个表单来编辑“selectedData”中的数据

这是我的观点：

 <div class="ui-grid-row" *ngFor="let myField of fields" >
            <div class="ui-grid-col-4"><label for="{{myField.name}}">{{myField.name}}</label></div>
            <div class="ui-grid-col-8"><input pInputText id="{{myField.name}}" [(ngModel)]="this['selectedData.' + myField.name]" /></div>
        </div>

问题出在这一行

[(ngModel)]="this['selectedData.' + myField.name]"

它没有按我的意愿工作。这是我编辑时组件的 Google Chrome 手表：

如您所见，Angular2 创建了一个名为“selectedData.Label”的对象，而不是使用 selectedData 现有对象。

有解决办法吗？还是我应该换一种方式？

谢谢

【问题讨论】：

我很难理解这一点。因此，您正在尝试在示例中编辑现有 selectedData 的标签。那么它应该是例如[(ngModel)]="selectedData.Label" 否则它不会更新标签。
为了什么目的需要fields数组？
目的是编辑字段，在设计时不知道字段的名称。 “标签”只是一个例子。我希望能够将我的表单用于任何对象，只有字段定义
哦，好的。现在我明白你的意思了！

标签： angular

【解决方案1】：

答案很简单：

[(ngModel)]="selectedData[myField.name]"

如果 field.Name 的值为 'label'，则前面的代码等价于：

[(ngModel)]="selectedData.label"

我不知道 '[ ]' 可以这样使用。

【讨论】：

我听不懂你的回答。请多解释一下。
@Sylvain Reverdy 但是我们如何在组件中使用正确的键捕获数据..
如何在 .ts 端填充？