如何访问 *ngFor 中的'index'并进行编辑(不能删除列表中的多个项目)

Question

我有这个：

.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，但我不知道如何管理它

Answer 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，而是用新数组覆盖它，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>