Angular 2 Binding to Array Value

Question

I am trying to bind to the value of an array in my template view. In AngularJS I accomplished this as follows

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

This worked fine but fails in Angular2, below is what I tried.

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

What would be the correct way to do this now? I have tried changing to to a function which returns the correct array value but this also fails.

M Fuat · Accepted Answer · 2017-03-24 14:00:59Z

0

Try this:

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

answered Mar 24, 2017 at 14:00

M Fuat

1,4503 gold badges16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user3208483 Over a year ago

Apologies, I have tried this also though, It seems to look for a value of 'childControl.Fieldname' rather than the value that FieldName equates to. Fails with the same error I pasted below.

YounesM Over a year ago

That does nothing. [value] binds the components value to the input. (value) binds the input to the component [(value)] is two way data-binding and since his div has no input data in it [(value)] serve no purpose.

M Fuat Over a year ago

Could u define a new mainTableData array in your component and try the following: [(ngModel)]="mainTableData[0].childControl.FieldName" Fill your array with a fake data.

M Fuat Over a year ago

Or just define a new array the tell us what is the result

M Fuat Over a year ago

Also you can try to put ? after mainTableData[0] .

|

YounesM · Accepted Answer · 2017-03-24 14:31:29Z

0

It will probably be something like this (assuming : mainTableData[0].childControl.FieldName is on your component.ts)

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

If you can also add custom attributes by doing :

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

edited Mar 24, 2017 at 14:31

answered Mar 24, 2017 at 13:56

YounesM

2,31717 silver badges30 bronze badges

9 Comments

user3208483 Over a year ago

I tried this also, this fails with the following error. self.parentView.parentView.parentView.parentView.context.mainTableData is undefined

YounesM Over a year ago

Where do you call your dx-text-box ? Can you post the component.ts file ?

user3208483 Over a year ago

This is called in the template, there isnt any code related to this in the component.ts. Its an empty class that loads the template and the mainTableData is on the service.

YounesM Over a year ago

So value is a custom attribute ?

YounesM Over a year ago

@user3218507 Also that sound weird. Why would you need a value attribute in empty component ?

|

Joe Keene · Accepted Answer · 2017-03-24 14:58:40Z

0

Could you potentially use a function to get your value rather than do it in the template?

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

Inside your parent component:-

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

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

Inside your dx-text-box component:-

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

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

answered Mar 24, 2017 at 14:58

Joe Keene

2,36124 silver badges29 bronze badges

9 Comments

user3208483 Over a year ago

Unforunatly not, value can only take a string.

Joe Keene Over a year ago

Well that function will return a string - I guess (without seeing your mainTableData array)

user3208483 Over a year ago

When I set it to a function such as [(value)]="test()" I get the following error Parser Error: Unexpected token '=' at column 13 in [test()=$event]

user3208483 Over a year ago

Thats was my fault, it works when I set it to 1 way binding. Just need to figure out how to get it to update, the dx-text-box component is a devextreme component, not my own

Joe Keene Over a year ago

Did you follow this github.com/DevExpress/devextreme-angular/blob/master/examples/… ?

|

Collectives™ on Stack Overflow

Angular 2 Binding to Array Value

3 Answers 3

6 Comments

9 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

9 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related