角4スプライスは常に配列から最後の要素を削除します

Question

私は奇妙な問題があります。何らかの理由でspliceは配列から最後の要素を削除します。alertは正しいインデックスを返します。

onRemove()は削除方法です。

<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

ロジックは正しいです。私はそれを見ている角度が問題だと思う。それをクリックすると、正しい要素が削除されます。

たとえば、あなたは次のコンテキストインデックスあなたは、インデックス1を持つ要素を削除すると、要素の総数は2になり、0。

0 - course1 
    1 - course2 
    2 - course3 

から始まると、アレイ内の3つの要素を持っていることを考えます索引の変更も同様に行われます。

0 - course1 
1 - course3 

だから、これはあなたが実際にそれだけで、配列の位置をシフトしているのに対し、それは常に最後の要素を削除していることを考えるように取得することができます。

次のコードは、達成しようとしているものです。ただ、これは