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

Question

[AntonVirovets]

<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`

Comments

[AntonVirovets]

Кирилл, а как мне целый проект выложить?) там все связано, это большое приложение

[Mikola-BLR]

Метод .splice() нормально работает.
Вот пример:
https://stackblitz.com/edit/angular-n4fnzb-ppauhr

Попробуйте вывести во вьюшку массив tags при помощи {{tags | json}} и посмотреть, что там творится.

[AntonVirovets]

но в примере у Вас тоже последний елемент удаляется, а не конкретный

[Maks Kovyvchak]

Mikola-BLR скинул полностью рабочий и хороший пример, посмотрите внимательней !