Удалить определенный элемент (индекс) метод

Question

Итак, у меня есть список телефонов, к которым я добавляю новые строки ввода, и у меня есть набор методов удаления для каждой отдельной строки.

Это шаблон:

 <div formArrayName="mobiles">
    <div *ngFor="let mobile of mobiles.controls; let i = index" [formGroupName]="i">
        <div class="d-flex align-items-center" [class.pt-4]="i > 0">
            <input class="input" type="text" formControlName="phone">
            <a class="input-remove ml-3">
                <i class="icon icon-trash h3 text-primary" (click)="removeMobile()"></i>
            </a>
        </div>
    </div>
</div>

И это мои методы, которые находятся внутри соответствующего компонента:

get mobiles(): FormArray {
    return this.form.get("mobiles") as FormArray;
}

get stations(): FormArray {
    return this.form.get("stations") as FormArray;
}

addMobile() {
    this.mobiles.push(this.fb.group(new PhoneFormGroup()));
}

addStation() {
    this.stations.push(this.fb.group(new PhoneFormGroup()));
}

removeMobile(index: number) {
    this.mobiles.removeAt(index);
    if (this.mobiles.controls.length == 0) {
        this.addMobile();
    }
}

removeStation(index: number) {
    this.stations.removeAt(index);
    if (this.mobiles.controls.length == 0) {
        this.addStation();
    }
}

Проблема здесь в том, что всякий раз, когда я нажимаю кнопку удаления, он удаляет первый элемент (индекс [0]) из спискаи я хочу удалить конкретный элемент, который я выбрал для удаления.

Что я делаю не так?

Answer 1

Вы не передаете index параметр в removeMobile функцию из вашего HTML-шаблона.

<i class="icon icon-trash h3 text-primary" (click)="removeMobile(i)"></i>