Question

我正在尝试在模板视图中绑定数组的值。在AngularJS中，我完成了如下

 <div dx-text-box="{bindingOptions: {
       value: 'mainTableData[0].{{childControl.FieldName}}'
 }}"></div>

这种方法很好但在Angular2中失败了，下面是我试过的。

<dx-text-box
       [(value)]="mainTableData[0].{{childControl.FieldName}}">
</dx-text-box>

现在这样做的正确方法是什么？我已经尝试过更改为返回正确数组值的函数，但这也失败了。

Answer 1

试试这个：

<dx-text-box
       [(value)]="mainTableData[0].childControl.FieldName">
</dx-text-box>

Answer 2

它可能是这样的（假设：mainTableData[0].childControl.FieldName在你的component.ts上）

<dx-text-box
       [value]="mainTableData[0].childControl.FieldName">
</dx-text-box>

如果您还可以通过执行以下操作添加自定义属性：

<div [attr.dx-text-box] = "{bindingOptions: {
   value: 'mainTableData[0].{{childControl.FieldName}}'}}">
</div>

Answer 3

您是否可以使用函数来获取值而不是在模板中执行此操作？

<dx-text-box
       [value]="getMyValue(childControl.FieldName)" (valueChanged)="updateValue($event)>
</dx-text-box>

在您的父组件中： -

public getMyValue(name) {
    return this.mainTableData[0][name];
}

public updateValue(event) {
    console.log("new value", event.target.value);
}

在dx-text-box组件中： -

@Ouput public valueChanged: EventEmitter<any> = new EventEmitter();

public functionThatsFiredWhenChangesHappen(value) {
    this.valueChanged.emit(value);
}

Angular 2绑定到数组值

3 个答案: