I am encountering a problem with rendering the index of *ngFor directive for a specific scenario as described below.
Suppose we have an array of objects like this:
this.temp = [
{name:'John',age:24,visibility:'visible'},
{name:'Kane',age:26,visibility:'hidden'},
{name:'Ross',age:28,visibility:'visible'},
{name:'Lui',age:21,visibility:'visible'}
]
To display this in my app.component.html file, I have the following HTML:
<div *ngFor="let user of temp; let i = index">
<div *ngIf="user.visibility === 'visible' ">
<div>{{i+1}}</div>
<div>{{user.name}}</div>
</div>
</div>
So, based on the array example above, it renders users as:
1. John
2. Ross
3. Lui
Now, there is a button called 'Change visibility' next to each user in my UI, where clicking on it toggles the visibility state of the user from 'hidden' to 'visible' and vice versa.
However, when clicking the button next to John, even though its visibility is set to hidden, the rendered UI shows:
2. Ross
3. Lui
My desired output is:
1. Ross
2. Lui
How can I ensure that the index renders correctly?
The constraint here is that I cannot modify or change the length of my this.temp array. Essentially, I require the entire array with only the visibility property updated based on user actions.
Any assistance would be appreciated.