刪除特定項目（索引）的方法

Question

因此，我有一個電話列表，向每個單獨的行添加了新的輸入行，並設置了remove方法。

這是模板：

 <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參數即可從HTML模板中removeMobile功能。

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