Why does splice only remove the last component?

Question

JavaScript

<div class="common-goal-tags-container">
        <p #target2 class="table-divider-title">GOAL'S TAGS</p>
        <div class="tags-container">

            <div class="goal-tag input-tag" *ngFor="let t of tags; let i = index">
                <ion-input (focusin)="utils.scrollToTarget(target2)" class="tag-input" (input)="tagChanged($event, i)" value="{{t}}"></ion-input>
                <div (click)="tags.splice(i, 1)" class="delete-tag">X</div>
            </div>
            <div *ngIf="tags.length<5" class="add-goal-tag goal-tag input-tag" (click)="onAddTag()">
                <ion-icon name="add"></ion-icon>
            </div>
        </div>
    </div>

tags = [];
That is, tags are created dynamically, I checked that it returns `i` , returns the correct index, but when you click on any tag, the last one is always deleted and the element that matches `i` should be deleted