Question

我有一个奇怪的问题，由于某种原因，即使alert给出了正确的索引，splice总是从数组中删除最后一个元素。

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的元素时，元素总数变为两个，因此索引也会更改。

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>

希望这有帮助

angular 4 splice总是从数组中删除最后一个元素

1 个答案: