eckig 4 ​​Spleiß löscht immer das letzte Element aus Array

Question

Ich habe ein seltsames Problem, wo aus irgendeinem Grund Spleiß immer letzten Element aus Array löscht, obwohl die alert gibt richtigen Index.

Die onRemove() Methode ist, was das Entfernen macht.

<button (click)="onAdd()">Add</button> 

<ul> 
    <li *ngFor="let course of courses; index as i; even as isEven"> 
     {{ i }} - {{ course.name }} <span *ngIf="isEven">(EVEN)</span> 
     <button (click)="onRemove(course)">Remove</button> 
    </li> 
</ul> 

export class AppComponent { 

    courses = [ 
     { id: 1, name: 'course1' }, 
     { id: 2, name: 'course2' }, 
     { id: 3, name: 'course3' }, 
    ]; 

    onAdd() { 
     this.courses.push({ id: 4, name: 'course4' }); 
    } 

    onRemove(course) { 
     let index = this.courses.indexOf(course); 
     alert(index); // I get correct index here 
     this.courses.splice(index, 1); 
    } 

} 

Answer 1

Die Logik ist korrekt. Ich denke, dass der Winkel, den du dir ansiehst, das Problem sein könnte. Es entfernt das richtige Element, wenn Sie darauf klicken.

Betrachten wir beispielsweise, dass man 3-Elemente in dem Array mit den folgenden Zusammenhängen Index 0.

0 - course1 
    1 - course2 
    2 - course3 

anspringt, wenn Sie entfernen Element mit Index 1, wird die Gesamtzahl der Elemente zwei, und als Ergebnis ändert sich auch der Index.

0 - course1 
1 - course3 

Also das kann man denken lernen, dass es immer das letzte Element, während in Wirklichkeit löscht es wird nur die Position des Arrays zu verschieben.

Der folgende Code könnte das sein, was Sie erreichen möchten. Ändern Sie einfach den ersten String-Interpolation {{course.id}} statt {{i}}

<li *ngFor="let course of courses; index as i; even as isEven"> 
    {{ course.id }} - {{ course.name }} <span *ngIf="isEven">(EVEN)</span> 
    <button (click)="onRemove(course)">Remove</button> 
</li> 

hoffe, das hilft