Question

使用Angular 4.0.2，我有一个* ngFor创建输入元素并通过添加按钮更新对象数组，但我试图弄清楚如何更新对象＆＃39;一旦从该数组中删除一个项目就会失败。

目前，我的ngFor看起来像：

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

然后，我的删除按钮有一个（点击）事件：

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

方法如下：

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

但是，当我在删除对象后更新数组中的另一个输入元素时，indeces是不正确的。似乎＆＃34;让我=索引＆＃34;在* ngFor中没有减少，我显然不能只使用：

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

Answer 1

您无需手动修改* ngFor设置的索引。 Angular通过其双向数据绑定来处理它。当您修改＆＃34;名称＆＃34;在您的组件中的数组中，视图将自动更新以反映更改，这包括* ngFor。

上的索引

* ngFor：

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

点击活动：

(click)="removeRow(i)"

组件方法：

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

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

修改：Plunker

Answer 2

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

尝试不将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);
}

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

Answer 3

不是i通过值传递到删除行功能吗？如果是这样，你必须在它存在的相同范围内减少它（在ngFor循环内）。

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

Angular中* ngFor的递减指数

3 个答案: