如何访问 *ngFor 中的“索引”并对其进行编辑（不能删除列表中的多个项目）

Posted 2023-03-13

【中文标题】如何访问 *ngFor 中的“索引”并对其进行编辑（不能删除列表中的多个项目）

【英文标题】：How to access 'index' in *ngFor and edit it (can't delete more than one item in a list)

【发布时间】：2019-06-07 23:08:21

【问题描述】：

我有这个：

html：

<ion-item-sliding *ngFor="let object of objectList; let idx = index">
        <ion-item>
            <ion-input type="text" text-left [(ngModel)]="objectList[idx].name" placeholder="Name"></ion-input>
            <ion-input type="text" text-right [(ngModel)]="objectList[idx].amount" placeholder="Amount"></ion-input>
        </ion-item>
        <ion-item-options side="end">
            <ion-button color="danger" (click)="deleteObject(object)">
                <ion-icon slot="icon-only" name="trash"></ion-icon>
            </ion-button>
        </ion-item-options>
</ion-item-sliding>

TS：

public deleteObject(object) 
    let index = this.objectList.indexOf(object);
    this.objectList.splice(index, 1);


public addObject() 
    this.objectList.push('name': '', 'amount': '');

当我使用函数addObject()（单击按钮时调用）添加object 时，屏幕上会出现一个空项目，这是正常的，但是当我删除一个项目时，滑动它并单击删除按钮（调用deleteObject(object) 函数）发生了一些奇怪的事情。我可以删除一个项目，但如果我尝试删除另一个项目，我无法滑动任何项目。我认为问题出在*ngFor 中的index，但我不知道如何管理它

【问题讨论】：

试试(click)="objectList.splice(idx, 1)"。

如果问题是索引，您可以将ngModel 方法更改为[(ngModel)]="object.name"，因为*ngFor 已经为您提供了此数据。

尽量不要改变你的来源，而是制作一个没有你想要删除和重新影响变量的数据的副本，应该可以正常工作

尝试将“名称”添加到输入 和/或使用 [(ngModel)]="object.name" 和 [ngModel)]="object.amount"

如果无法重现，很难知道发生了什么。例如，我不确定我是否理解“但如果我尝试删除另一个项目，我将无法滑动任何项目”是什么意思。您的删除按钮是某种滑块控件吗？如果您可以在 StackBlitz 上重现您的错误，那将会很有帮助。

【参考方案1】：

我认为您可以使用 .filter 或使用另一种方法，为您的列表创建一个新对象（数组），以防止拼接问题，这会改变您的原始数组并弄乱您的索引。

这是一个可能的实现：

https://stackblitz.com/edit/ionic-qz5zfx

<ion-content padding>
  <ion-list>
    <ion-item-sliding *ngFor="let object of objectList; let idx = index">
        <ion-item>
            <ion-input type="text" text-left [(ngModel)]="objectList[idx].name" placeholder="Name"></ion-input>
            <ion-input type="text" text-right [(ngModel)]="objectList[idx].amount" placeholder="Amount"></ion-input>
        </ion-item>
        <ion-item-options side="end">
            <button ion-button color="danger" (click)="deleteObject(idx)">
                <ion-icon slot="icon-only" name="trash"></ion-icon>
            </button>
        </ion-item-options>
</ion-item-sliding>
  </ion-list>
  <button ion-button block color="primary" (click)="addObject()">
    <ion-icon slot="icon-only" name="add"></ion-icon> Add Item
  </button>
</ion-content>

TS：

import  Component  from '@angular/core';
import  NavController  from 'ionic-angular';

@Component(
  selector: 'page-home',
  templateUrl: 'home.html'
)
export class HomePage 

  objectList = [
     name: "item1", amount: 1 ,
     name: "item2", amount: 2 ,
     name: "item3", amount: 3 ,
     name: "item4", amount: 4 ,
     name: "item5", amount: 5 ,
  ]

  constructor(public navCtrl: NavController) 

  

  public deleteObject(objectIndex) 
    this.objectList = this.objectList.filter( (item, index) => 
      if (index !== objectIndex) return true;
    )


  public addObject() 
      this.objectList.push( name: 'newItem', amount: 25 );
  

当您使用过滤器方法时，它会创建一个新数组，您可以将其分配回您的 objectList，这样您就不会改变您的 objectList，而是用新数组覆盖它，angular 的更改检测将使用该数组“重新绘制您的列出并重新分配索引。

IONIC4 更新：

Ionic 4 要求您在删除项目之前调用特定方法来关闭滑动项目：https://github.com/ionic-team/ionic/issues/15486#issuecomment-419924318

所以模板代码应该是：

<ion-content>
    <ion-list #dynamicList>
        <ion-item-sliding *ngFor="let object of objectList; let idx = index">
            <ion-item>
                 object.name 
            </ion-item>
            <ion-item-options side="end">
                <ion-button color="danger" (click)="dynamicList.closeSlidingItems(); deleteObject(idx)">
                    <ion-icon slot="icon-only" name="trash"></ion-icon>
                </ion-button>
            </ion-item-options>
    </ion-item-sliding>
      </ion-list>
      <ion-button block color="primary" (click)="addObject()">
        <ion-icon slot="icon-only" name="add"></ion-icon> Add Item
      </ion-button>
</ion-content>

【讨论】：

我赞成您的回答，因为您的想法似乎可行，但并不完全。由于某些原因，它在 ionic 4 项目中不起作用。我刚刚创建了一个 ionic 4 和一个 ionic 3 项目，我已经将您的代码复制粘贴到其中，并且：在 ionic 3 项目中它可以工作，在 ionic 4 中问题仍然存在

做测试我写了(click)="deleteObject(idx-1)"。因此，使用您编写的代码并添加 -1 它“有效”，但显然我删除了列表中的前一项。这种方法允许我删除多个项目（即使它不是正确的）。我不明白为什么

我将在 ionic 4 中创建虚拟代码并检查它

希望你尽快完成

我已经更新了我的答案，测试了它是否适用于 Ionic 4