* ngFor的递减指数

Question

使用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--"

Answer 1

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

* ngFor：

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

点击事件：

(click)="removeRow(i)"

组成方法：

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

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

编辑： 柱塞

Answer 2

没有看到更多的代码...这只是一个猜测。 但是我假设您还具有组件类的names属性？

尝试不要将names数组传递给方法，而只是从绑定的names属性中删除该元素。 然后，Angular的数据绑定将处理其余的工作。

模板：

<tr *ngFor='let product of products; let i = index'>
    <td>
        <img    [src]='product.imageUrl'
                [title]='product.productName | uppercase'
                (click)="removeRow(i)">
    </td>
</tr>

我有一个图像，因此单击该图像即可...但是在按钮上它的作用相同。

组件类：

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

另外，我显示的“我”在模板中使用{{我}}和删除行“我”的价值被正确调整为新的索引集后的值。

Answer 3

i不是通过值传递给您的删除行函数吗？ 如果是这样，则必须在存在的范围内递减它（在ngFor循环内）。

示例： https ： //snook.ca/archives/javascript/javascript_pass