Currently, my form is connected to a C# API that displays a list of entries. I am trying to implement a feature where two out of three fields can be edited for each line by clicking a button that toggles between Yes and No. When the button is clicked, it should update values.excludeMrbxfer from 0 to 1 (I have created a custom pipe to display Yes for 1 and No for 0) or vice versa. The code snippet below shows how I am displaying the list with the toggle button.
<tr *ngFor= 'let value of values' >
<td class = "align-left" >{{value.binId}}</td>
<td > {{value.excludeMrbxfer | yesNo}}
<button type="button" class="btn btn-primary" name='excludeMrbxfer'
[(ngModel)] = "values.excludeMrbxfer" (click)='toggleChange(values)'>
{{value.excludeMrbxfer | yesNo}}</button>
</td>
</tr>
The problem I am facing is that when the button is clicked, it changes the values for all items in the table instead of just one. The desired functionality is to modify the state of only one item at a time.
Another issue I am encountering is regarding the toggleChange() method where I have to specifically mention which element in the JSON array needs to be edited for it to work. This results in changing all values.ecludeMrbxfer values when I intend to change only one. Below is the implementation of the toggleChange() method in my component:
toggleChange(values: any) {
if (values[0].excludeMrbxfer === 1) {
values[0].excludeMrbxfer = 0;
} else if (values[0].excludeMrbxfer === 0) {
values[0].excludeMrbxfer = 1;
}
}