ngFor is only setting value of last element

I have an array of objects called this.itemsArray. The object inside the array contains the attribute rate. The rate is set using [(ngModel)] when the user enters a value.

Whenever the user enters the rate, I want to show the button below. If the user does NOT enter the rate, then I want to hide the button.

The code works fine if there is only 1 item (and hence one rate) in the array. The issue comes when there are more than one items (and hence more than one rate in the array). In this case, the problem is that the button is being hidden ONLY when the LAST item (rate) in the array has a value.

I need the button to be hidden whenever ANY of the rates in the array are blank. How can I achieve this?

 <div *ngFor = "let item of this.itemsArray;  let i = index">
                                                                            
     <button  *ngIf = "this.itemsArray[i].rate" >Proceed</button>

</div>

33 thoughts on “ngFor is only setting value of last element”

Leave a Comment