data binding not working in angular

Question

Issue: while deleting the 1st row, and adding the 2nd row, the value of 1st row gets replaced by 2nd row's value.

I have created a plunker for the issue i am facing https://next.plnkr.co/edit/1FL8qmSgMsSQCGNT?open=lib%2Fapp.ts&preview

Steps to reproduce:

click on 'Select One' drop-down and select 'Screen 1' option.
Again click on 'Select One' drop-down and select 'Screen 2' option.
Now delete 1st row (Screen 1).
Again click on 'Select One' drop-down and select 'Screen 3' option.

The 1st row's value gets replaced by the 2nd row's value.

I dont know whats wrong in my code which is causing this issue .

If you display the index and the array ou will get a better view of what is happening : next.plnkr.co/edit/… — ibenjelloun
– ibenjelloun, Commented Jul 17, 2018 at 12:54
Add more options, like 1,2,3,4,1,2,3,4,1,2,3,4 and then change the generated values of 2 or something. They are influencing each other. Maybe go with a approach where you don't modify the list itself, but generating new lists.. would be easier in my opinion. — Stefan Rein
– Stefan Rein, Commented Jul 17, 2018 at 12:55
@ibenjelloun Yes, you are right... I also did this. The array is correct after delete and after add but why value gets changed? where is the problem? — Er Vipin Sharma
– Er Vipin Sharma, Commented Jul 17, 2018 at 13:01

Pragnesh Khalas · Accepted Answer · 2018-07-17 14:56:38Z

2

You have main issue is that you have used ngModel for select element.

So when you select item from select element at that time value is changed in selectedIds[rowIndex] item.

I have applied minor code refactoring in first div as per below it will helpful to you.

<div *ngFor="let id of selectedIds; let rowIndex = index">
    <select name="id_{{rowIndex}}" class="form-control" required >
        <option *ngFor="let screen of screens"
        [selected]="screen.screenId==id"
         [ngValue]="screen.screenId">{{screen.screenName}}
        </option>
    </select>
    <a class="pointer" (click)="removeScreen(rowIndex)">Delete</a>
</div>

answered Jul 17, 2018 at 14:56

Pragnesh Khalas

2,8982 gold badges15 silver badges26 bronze badges

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

3 Comments

Er Vipin Sharma Over a year ago

It is working on UI, but the binding is not working because you have removed the ngModel...Now the issue is as per your suggestion, how binding will work in this solution ?

Pragnesh Khalas Over a year ago

For that you need to create separate property for binding like you need to create custom object list in place number array(selectedIds). Do you want me to create sample ?

Er Vipin Sharma Over a year ago

You did a lot for me to resolve this issue. It would be great thanks to you if you can create a sample for the same. Sory for the inconvenience :)

mojtaba shafaghi · Accepted Answer · 2021-01-15 14:59:25Z

1

it's late but the problem is this code that exists in Metronic Template: changeDetection: ChangeDetectionStrategy.OnPush, and you should comment this line of code to enable data binding.

answered Jan 15, 2021 at 14:59

mojtaba shafaghi

214 bronze badges

Collectives™ on Stack Overflow

data binding not working in angular

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related