dataset => using tabulation key doesnt work properly, 2nd input takes value from 1st input

[DelaunayAlex]

The problem is located : in file 'forms-data-gris.component.ts' in function 'updateHeader' on line 'this.headers[col] = newHeader;'.

The problem happens only in the header section. You can reproduce by adding several columns, focus on the first one and type something and then press TAB. The content of the first header is duplicated in the second column. But the list of headers is not modified, and the content of the second header is not sent to the server. Impossible to get the current value of the input in the html in the F12 panel The ids of the headers are good, the probleme does not seem to be in the ts file.

What i've tried :

• create a deep copy of the list this.headers with the modified value and to re-assigned it
• Force re-render of the component
• Change the way to bind the input (onChange, ngOnChange, onUpdate, onFocus, onKeyPress)
• Update the ngFor to re-render

[KarimGl]

Update 17/08/2023: The problem occures:

• inside ngFor
• and when having multiple inputs with the same string [value]. (May be a problem of memory reference ?)
• and when trying to update the iteration variable

The bug can be reproduced here

Solution: Avoid to update iteration string variable inside ngFor. So use FormArray instead of String[].