Угловой 2 удаление выбранного элемента массива в дочернем компоненте

Question

У меня есть массив элементов, и каждый элемент массива имеет одну ссылку Удалить, клик которой я хочу, чтобы выбранный элемент массива был удален. Я толкаю объекты в массив уже и могу получить данные.

Код, который я использую, указан ниже.

Детский Component-

@Component({ 
    selector: 'child', 
    template: ` 
    <div> 
     {{element.name}} 
     <span (click)="deleteElement()">Delete</span> 
    </div> 
    ` 
}) 
export class ChildComponent { 
    @Input() 
    element: any; 
    @Output() 
    elementDeleted: EventEmitter<any> = new EventEmitter(); 

    deleteElement() { 
    this.elementDeleted.emit(); 
    } 
} 

Мой Родитель Component-

@Component({ 
    selector: 'child', 
    template: ` 
    <div> 
     <child *ngFor="let element of elements; let i= index;" [element]="element" (elementDeleted)="onElementDeleted(element)"> 
     </child> 
    </div> 
    ` 
}) 
export class ParentComponent { 
    constructor() { 
    this.elements = [ 
     { name: 'element1' }, 
     { name: 'element2' }, 
     (...) 
    ]; 
    } 

    onElementDeleted(element) { 
    var index = this.elements.findIndex((elt) => (elt===element)); 
    if (index != -1) { 
     this.elements.splice(index, 1); 
    } 
    } 

Прямо сейчас, каждый раз, когда последний элемент массива становится удален, вместо того, чтобы удалить выбранный item.For отл. Если я нажимаю ссылку Удалить для 0-го или 1-го индекса, все же последний элемент удаляется. Я не уверен, где я ошибаюсь.

Answer 1

EDIT: хорошо, вы также можете сделать это следующим образом:

Вам нужно пройти, какой элемент должен быть удален, так что правый элемент будет удален. Поэтому немного измените свой код, а затем пропустите элемент в вашем удалении.

<div> 
    {{element.name}} 
    <span (click)="deleteElement(element)">Delete</span> 
</div> 

и сделать Испустите передать элемент должен быть удален:

deleteElement(element) { 
    this.elementDeleted.emit(element); 
} 

, а затем удалить элемент:

onElementDeleted(element) { 
    let index = this.elements.indexOf(element); 
    this.elements.splice(index, 1); 
} 

И как уже говорилось Даниилом, # устарела, используйте let вместо.

Answer 2

Обновите свою версию Angular2. Проблема здесь, вероятно, в удаленном синтаксисе *ngFor=#element of elements, где #element меняется после присвоений, поэтому вы получаете последний элемент из списка в каждом случае (глобальная область шаблонов). Новый синтаксис - *ngFor="let element of elements", и он отлично работает. Plunker: https://plnkr.co/edit/OsxUS3V5pB3Tqko5SojJ?p=preview