使用 Angular 2 在 ngFor 内的 ngModel 中设置动态属性 [英] Set a dynamic property in ngModel inside ngFor, with Angular 2

问题描述

我有一个组件:

• "selectedData" : 任意
• "fields" :字段数组.字段是具有以下属性的对象:标签和类型.这些字段描述对象selectedData"

示例:

selectedData = { Label:"test", IsUsed:false}fields = [{name:'label', type:'string'},{name:'IsUsed, type:'boolean'}

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

这是我的部分观点:

问题出在这一行

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

它不像我想要的那样工作.这是我编辑时组件的 Google Chrome 手表:

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

有解决办法吗?或者我应该做不同的事情?

谢谢

解决方案

答案很简单:

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

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

[(ngModel)]="selectedData.label"

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

I have a component with :

• "selectedData" : any
• "fields" : An array of fields. A field is an object with these properties : label and type. These fields describe the object "selectedData"

Example :

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

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

I am trying to generate a form for editing the data inside 'selectedData'

Here is the part of my view :

 <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>

The problem is with this line

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

It does not work as I wanted. Here is the Google Chrome watch of my component when i edit :

As you can see, Angular2 creates an object with name "selectedData.Label" instead of using the selectedData existing object.

Is there a solution? Or should I do it differently?

Thx

解决方案

The answer was easy :

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

If field.Name has a value of 'label', the previous code is equivalent as :

[(ngModel)]="selectedData.label"

I did not know that the '[ ]' could be used this way.

这篇关于使用 Angular 2 在 ngFor 内的 ngModel 中设置动态属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！