Почему splice удаляет только последний компонент?

<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 = [];

То есть создаются динамически теги, Я проверял что возвращает `i` , возвращает правильный индекс, но при клике на любой тэг, всегда удаляется последний а должен удалятся элемент который соответсвует `i`