使用Angular 4.0.2,我有一个* ng用于创建输入元素并通过添加按钮更新对象数组,但是我试图弄清楚一旦从该数组中删除一个项目,如何更新对象的索引。

目前,我的ngFor看起来像:

*ngFor = let name of names; let i = index


然后,我的删除按钮具有一个(单击)事件:

(click)="removeRow(i, names)"


该方法如下所示:

    removeRow(index:number, names:Names[]){
        names.splice(index,1);
        index--;
    }


但是,当我在删除对象后去更新数组中的另一个输入元素时,索引是不正确的。看来* ngFor中的“ let i = index”不会递减,而且我显然不能只使用:

(click)="removeRow(i, names); i--"

最佳答案

您不需要手动修改* ngFor设置的索引。 Angular通过其双向数据绑定来处理它。当您在组件中修改“名称”数组时,视图将自动更新以反映更改,其中包括* ngFor上的索引。

* ngFor:

*ngFor="let name of names; let i = index"


点击事件:

(click)="removeRow(i)"


组成方法:

removeRow(index:number){
    this.names.splice(index,1);
}


请注意,您不需要将数组从视图传递到组件,因为您已经在组件中拥有该数组。

编辑:Plunker

关于javascript - * ngFor的递减指数,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/44678821/

10-13 06:27