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

您不能从您的HTML模板中将index param传递给removeMobile函数。

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

删除特定项（索引）方法

1 个答案: