javascript - 删除特定项（索引）方法

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]），我希望它删除我选择删除的特定项目。

我究竟做错了什么？

标签： javascriptangular

Answer 1

您不会将index参数传递给removeMobileHTML 模板中的函数。

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