I have a ion-segment. Inside are several ion-segment-buttons, generated by *ngFor.
If i delete one Element of the Array that is used to generate the ion-segment-buttons, it comes to errors.
For example: I delete the first Element. The amount of displayed ion-segment-buttons change correctly, but if i click then the ion-segment-button that is now the first, (ionChange) of the ion-segment will not be called.
But if i click on another ion-segment-button (ionChange) will be called.
The confusing thing is, that after i clicked any ion-segment-button, beside the first, and right after that the first one, than everything is suddenly working correctly (it means, (ionChange) is also called on the first ion-segment-button).
Here is the code:
<ion-segment
scrollable
(ionChange)="changeExercise($event)"
[value]="currentTab">
<ion-segment-button
*ngFor="let task of exerciseData.exercises; let i = index"
[value]="i">
<ion-label>{{i + 1}} <span *ngIf="task.name">-</span> {{task.name}}</ion-label>
</ion-segment-button>
</ion-segment>
deleteExercise() {
this.exerciseData.exercises = this.exerciseData.exercises.filter(el => {
return el !== this.active;
});
}
where this.active is somewhere in the code set like this with a certain index
this.active = this.exerciseData.exercises[index];
the Element is correctly deleted from the Array, as i see in console.log()
Have anyone an idea how to fix it?