<ion-segment> (ionChange) not called after click, when i delete one <ion-segment-button> before

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?