Как получить доступ к 'index' в * ngFor и отредактировать его (нельзя удалить более одного элемента в списке) - PullRequest
Новая
       9

Как получить доступ к 'index' в * ngFor и отредактировать его (нельзя удалить более одного элемента в списке)

0 голосов
/ 14 января 2019

У меня есть это:

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': ''});
}

Когда я добавляю object с функцией addObject() (вызывается при нажатии кнопки), на экране появляется пустой элемент, и это нормально, но когда я удаляю элемент, сдвигаю его и нажимаю кнопку удаления (который вызывает функцию deleteObject(object)) происходит нечто странное. Я могу удалить один элемент, но если я попытаюсь удалить другой, я не могу сдвинуть ни один из элементов. Я думал, что проблема в index в *ngFor, но я не могу понять, как с этим справиться

1 Ответ

0 голосов
/ 14 января 2019

Я думаю, что вы могли бы использовать .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 });
  }

}

Когда вы используете метод filter, он создает новый массив, который вы можете назначить обратно в свой 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>
...