Angular 6 getting the value of an array at Index[i][j] interpolation issue

I am dynamically creating components in a an Angular 6 app, and need to access the contents of a text field. The text field is contained in dynamically created array. Parent array[i] contains child components[j] and I need to find the value of the child component.

Html for component as follows:

<input class="fileInput" id="filei_j" #filei_j (change)="save(i, j, (file+i+_+j).value)" />

Function call to save:

save(index1: number, index2: number, val) console.log('index1: ' + index1 + ' index2: ' + index2 + ' value: ' + val);

currently my console logs the value val as undefined and I am sure it is because

have you ever heard of two-way binding? Because you are inventing ngModel right now
– smnbbrv
Aug 30 at 19:19

ngModel

You forgot to use quotes? (change)="save(i, j, ('file' + i + '_' + j).value)"
– Jeffrey Roosendaal
Aug 30 at 19:20

(change)="save(i, j, ('file' + i + '_' + j).value)"

@JeffreyRoosendaal the whole concept (file+i+_+j).value) is absurd, even if you use quotes here, you get string and try to access property value of string, which is undefined.
– smnbbrv
Aug 30 at 19:23

(file+i+_+j).value)

value

undefined

@smnbbrv I will freely admit that my angular is old and rusty, my syntax is probably wrong, and am attempting to access the child array incorrectly. I wanted to at least try (prefferably incorrectly than not at all) before I posted the question. I would like to use 2 way binding, thus my attempt at interpolation, but I am doing it wrong and looking for the correct way to do this.
– Jon Smith
Aug 30 at 19:32

the way to do your thing right is <input class="fileInput" #file (change)="save(i, j, file.value)" />. That's pretty much it. Every of your change events will have its own file reference. No interpolation, because it is not required here. Or, probably, specifically to your case <input class="fileInput" (change)="save(i, j, $event.target.value)" /> without even using element reference
– smnbbrv
Aug 30 at 19:34

<input class="fileInput" #file (change)="save(i, j, file.value)" />

file

<input class="fileInput" (change)="save(i, j, $event.target.value)" />

1 Answer
1

As was pointed out in the question comments by @smnbbrv, I was using the ngmodel 2 way binding incorrectly. A simple change to my code (removing my poor attempt at interpolation), fixed the issues.

correct code in the html portion should have been:

<input class="fileInput" #file (change)="save(i, j, file.value)" />

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

搜尋此網誌

Dfyjkt