Angular中* ngFor的递减指数-Java 学习之路

使用Angular 4.0.2，我有一个* ngFor创建输入元素并通过添加按钮更新对象数组，但是我试图找出一旦从该数组中删除一个项目后如何更新对象的indeces .

目前，我的ngFor看起来像：

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

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

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

方法如下：

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

但是，当我在删除对象后更新数组中的另一个输入元素时，indeces是不正确的 . 似乎* ngFor中的“let i = index”没有减少，我显然不能只使用：

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

3 回答

1
您无需手动修改* ngFor设置的索引 . Angular通过其双向数据绑定来处理它 . 修改组件中的“名称”数组时，视图将自动更新以反映更改，这包括* ngFor上的索引 .
- ngFor：
```
*ngFor="let name of names; let i = index"
```
点击事件：
```
(click)="removeRow(i)"
```
组件方法：
```
removeRow(index:number){
    this.names.splice(index,1);
}
```
请注意，您不需要将数组从视图传递到组件，因为您已在组件中拥有它 .

编辑：Plunker
回复于 2024-04-26T19:30:00+08:00
3
没有看到更多的代码...这只是猜测 . 但我假设你也有一个组件类的名称属性？

尽量不要将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"值 .
回复于 2024-04-26T19:30:00+08:00
0

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

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

回复于 2024-04-26T19:30:00+08:00

Angular中* ngFor的递减指数

3 回答

相关问题