角4拼接始終刪除數組中的最后一個元素

Question

我有一個奇怪的問題，即使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

邏輯是正確的。 我認為您正在查看的角度可能是問題。 單擊它會刪除正確的元素。

例如，假設您在數組中有3個元素，並且以下上下文索引從0開始。

  0 - course1
  1 - course2 
  2 - course3

當您刪除索引為1的元素時，元素總數變為2，結果索引也隨之更改。

0 - course1 
1 - course3

因此，這會讓您認為它總是刪除最后一個元素，而實際上，它只是在移動數組的位置。

以下代碼可能是您想要實現的。 只需將第一個字符串插值更改為{{course.id}}而不是{{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>  

希望這可以幫助