2

我正在尝试将值绑定到子组件。该值来自对象的属性。但是对于我的工作，属性名称是一个变量，我正在寻找一种解决方案来绑定类似的东西

[childInput]="ParentObject['{{PropertyKey}}']"

甚至这个

 [childInput]="{{getValue(propertyKey)}}"

and in parentcomponent,

getValue(propertyName:string): any {
        return this.ParentObject[propertyName];
    }

-------------------------------------------------- -----------------------------------------

以下是我正在尝试做的简要说明。

我的目标是有一个框架，当我传递一个对象（带有数据）和表单项的集合（映射到对象）将显示表单（查看/编辑）

我正在使用动态表单中的指南，并且能够根据构成表单的项目集合显示空表单。我坚持显示填写的表格（详细信息）。

例如表单项的集合

AddressForm [] = new TextboxItem(
                {
                    key: 'address1',
                    label: 'Address Line1',
                    required: true
                }
            ),
            new TextboxItem(
                {
                    key: 'address2',
                    label: 'Address Line 2'
                }
            ),
               new TextboxItem(
                {
                    key: 'city',
                    label: 'City',
                    required: true
                }
            ),
            new TextboxItem(
                {
                    key: 'state',
                    label: 'State',
                    required: true
                }
            ),
           new TextboxItem(
                {
                    key: 'zip',
                    label: 'Zip',
                    value: '',
                    required: true
                })];

要查看/编辑的数据

SampleData[] = 
[{address1:"10 main st", address2:"", city:"New York", state:"New York", zip:"11017" },
 {address1:"20 Kirk ave", address2:"", city:"Albany", state:"New York", zip:"11700"},
 {address1:"1st ave", address2:"", city:"Queens", state:"New York", zip:"11145"}];

sampleData 中的propertyName 是TextBoxItem 中“key”的值。

现在，当我从 sampleData 绑定第一个项目时，我希望每个属性都绑定到表单定义的相应项目应该在 html 控件中显示数据。

所以我正在寻找一种解决方案，比如将 SampleData 中的选定项目绑定到表单

详细组件的模板：

<TheForm [formObject]="theSelected"></TheForm>

而 Form 又应该将每个属性绑定到 formItem。这是我被卡住的部分。我的想法是从 formObject 中获取属性值，例如formObject['{{item.key}}']需要您的帮助。

表单组件模板的一部分：

 <div *ngFor="let item of formItems">
            <Item [item]="item" [itemValue]="formObject['{{item.key}}']"></Item>
 </div>

以及Item Component模板的一部分：

<input *ngSwitchCase="'textbox'" [formControlName]="item.key"
               [id]="item.key" [(ngModel)]="itemValue">

我已经修剪了代码，只是为了让您了解我的问题的主要思想。如果您需要更多信息，请告诉我。

谢谢

4

1 回答 1

0

这在没有插值绑定大括号的情况下完成了技巧 [childInput]="getValue(propertyKey)"。

于 2017-04-13T20:17:01.110 回答